动态修改m3u8文件，导致Safari的video标签无法获取内容

我想实现一个功能，将hls视频的m3u8文件里面的加密数据存放在其他地方，
需要下载m3u8文件后，对其内容进行修改替换。然后再传给video标签进行播放。
demo 地址:http://flv.pkgexs.com/t3.html
具体代码如下：

fetch('https://flv.pkgexs.com/t3/index.m3u8')
.then(response => response.text())
.then(data => {
    // 处理m3u8内容
    let modifiedM3U8 = data.replace('#EXT-X-KEY:00000', '#EXT-X-KEY:METHOD=AES-128,URI="https://flv.pkgexs.com/t3/enc.key",IV=0x46313b1b2545abd70f4025fc739789bb');
    console.log("修改后的M3u8数据：" + modifiedM3U8);
    var bb = new Blob([modifiedM3U8], { type: 'application/vnd.apple.mpegurl' }); //创建BLOB
    var bloburl = (window.webkitURL || window.URL).createObjectURL(bb);  // 创建BLOB URL
    // 创建video元素
    const video = document.createElement('video'); 
    // 设置video属性
    video.src = bloburl;//blob url
    video.controls = true;
    video.autoplay = true; 
    // 添加到文档中
    document.body.appendChild(video); 
    // 查看 blob url 的内容
    getblob(bloburl)
})
.catch(error => {
    console.error('Fetch Error:', error);
}); 
function getblob(url){
    fetch(url)
    .then(response => response.text())
    .then(data => {
        console.log(data);
    })
}

Apple的Safari浏览器是支持hls原生播放的，我测试的时候遇到一个很奇怪的问题，修改内容后的blob文件无法被Safari的video读取，具体表现是，

blobUrl被请求了2次，第一次获取 1 个字节，第二次获取 7 个字节如图：

第二次：

请求莫名加上了Range，导致无法播放，有谁知道这个问题如何解决？

补充说明一下：
1） m3u8文件是utf-8编码；
2） m3u8地址是可以直接播放的，我把替换好的hls视频直接播放：地址：http://flv.pkgexs.com/y.html 在Safari中播放没有问题

解决方案是将你的m3u8文件托管在HTTPS服务器上，然后再进行修改和替换操作。这样可以确保浏览器对资源的请求是安全的，不会被浏览器或服务器拒绝或中断。

【以下回答由 GPT 生成】

问题分析:
在Safari浏览器中，使用video标签播放hls视频时，由于cORS限制，video标签只能从相同域下的资源中加载内容。而在上述代码中，我们使用了fetch方法获取了m3u8文件，并通过Blob URL将其作为video标签的src属性进行播放。但是，这个Blob URL并不属于相同域下的资源，因此Safari浏览器无法获取到它的内容，导致无法播放视频。

解决方案:
为了解决这个问题，有以下几种可选的方案：

1. 将m3u8文件放在与网页相同的域下，确保video标签可以直接从相同域下的资源中加载内容。

2. 在服务器端进行代理，将m3u8文件请求转发到与网页相同域下的代理接口，然后将代理接口返回的m3u8内容交给video标签进行播放。代理接口可以使用各种后端语言实现，例如Node.js的Express框架、Python的Flask框架等。

3. 使用video.js等第三方的hls插件，它们内部实现了对hls视频的加载和解析，可以绕过浏览器的限制。可以参考video.js文档了解更多使用方法。

注意事项:
1. 在进行跨域请求时，需要确保服务端返回正确的CORS响应头，以允许在其他域下进行跨域访问。

2. 确保m3u8文件的格式正确，包含正确的加密信息和密钥等。

3. 如果使用了HTTPS协议，请确保证书配置正确，以避免浏览器的安全相关限制。

4. 在使用video标签播放hls视频时，需要通过针对不同浏览器的适配，使用相应的hls.js或shaka-player等库进行处理。

我无法提供具体代码解决该问题，因为这需要根据具体的技术栈和环境来实现和调试。然而，根据以上提供的解决方案，您可以进行具体的代码实现和调试，如果遇到任何问题，请随时向我提问。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下：
根据您提供的信息，您在通过修改m3u8文件内容后遇到了Safari浏览器无法正确读取blob文件的问题。这可能是由于Safari浏览器的部分特性导致的。
为了解决这个问题，您可以尝试在修改m3u8文件内容后，使用URL.createObjectURL方法创建一个MediaSource对象，并将其设置为video元素的source属性。这样可以绕过Safari浏览器对blob URL的处理问题。

以下是修改过的代码示例：

fetch('https://flv.pkgexs.com/t3/index.m3u8')
  .then(response => response.text())
  .then(data => {
    // 处理m3u8内容
    let modifiedM3U8 = data.replace('#EXT-X-KEY:00000', '#EXT-X-KEY:METHOD=AES-128,URI="https://flv.pkgexs.com/t3/enc.key",IV=0x46313b1b2545abd70f4025fc739789bb');
    console.log("修改后的M3u8数据：" + modifiedM3U8);

    // 创建MediaSource对象
    const mediaSource = new MediaSource();
    const video = document.createElement('video');
    video.controls = true;
    video.autoplay = true;

    // 监听MediaSource对象的sourceopen事件
    mediaSource.addEventListener('sourceopen', () => {
      const sourceBuffer = mediaSource.addSourceBuffer('video/mp4');
      sourceBuffer.addEventListener('updateend', () => {
        mediaSource.endOfStream();
      });

      // 将修改后的m3u8数据附加到sourceBuffer
      const uint8Array = new TextEncoder().encode(modifiedM3U8);
      sourceBuffer.appendBuffer(uint8Array);
    });

    // 将MediaSource对象设置为video元素的source属性
    video.src = URL.createObjectURL(mediaSource);

    // 添加到文档中
    document.body.appendChild(video);
  })
  .catch(error => {
    console.error('Fetch Error:', error);
  });

通过使用MediaSource对象，我们可以将修改后的m3u8数据附加到sourceBuffer中，并将MediaSource对象设置为video元素的source属性。这样可以确保在Safari浏览器中正常播放修改后的m3u8文件。

希望这个解决方案能够解决您遇到的问题。如果问题仍然存在，请尝试查看Safari浏览器的开发者工具中的错误信息，以获取更多有关问题的线索。

如果以上回答对您有所帮助，点击一下采纳该答案～谢谢

m3u8可以直接播放，没必要下载吧

你针对m3u8文件替换了加密，但是你ts文件又加密了没？密钥一致吗

修改之后就要自定义video标签了。

如果你坚持使用 Blob URL，可以尝试使用一个工具或库，将 Blob URL 转换为可被 Safari 正确解析的 URL 格式。这可能需要额外的处理步骤，以确保 Safari 能够正确加载资源。你可以搜索现有的解决方案或自行实现。

使用其他方法加载M3U8文件：考虑使用JavaScript或其他工具加载M3U8文件的内容，而不是依赖video标签的自动加载。你可以使用XHR（XMLHttpRequest）或fetch API等手动加载M3U8文件，并将内容传递给视频播放器进行处理。

调整服务器响应头：在服务器响应M3U8文件时，检查是否正确设置了响应头。特别是，确保没有设置Accept-Ranges或Range等与分段传输相关的头部字段。

可以先恢复到上个版本吗，或者看看这个
解决video标签播放m3u8格式视频失败问题

解决video标签播放m3u8格式视频失败问题_hls.js m3u8 白屏_Rattenking的博客-CSDN博客前言什么是m3u8？效果效果地址 m3u8视频切换效果图片解决方法采用video.js插件！引入引入videoJS插件样式文件；引入videoJS插件JS文件；引入videoJS插件播放m3u8格式视频的HLS功能。<link href="./video-js.css" rel="stylesheet">..._hls.js m3u8 白屏

https://blog.csdn.net/m0_38082783/article/details/82148862

是的，iPhone上的Safari浏览器不支持MSE（Media Source Extensions），因此无法通过MSE来读取重组后的m3u8文件。MSE是一种Web API，允许开发人员使用JavaScript来控制媒体播放，包括视频和音频。

在这种情况下，你可以考虑使用Safari浏览器提供的原生API来控制视频播放。具体来说，你可以使用Safari的HTML5 video元素来播放视频，通过修改video元素的src属性来指定重组后的m3u8文件的URL。

以下是一个示例代码片段，演示如何使用Safari的HTML5 video元素来播放重组后的m3u8文件：

<video id="myVideo" controls>
  <source src="reconstructed_m3u8_file.m3u8" type="application/x-mpegURL">
  Your browser does not support the video tag.
</video>

在上面的示例中，video元素的id属性为"myVideo"，controls属性用于显示视频控件。source元素的src属性指定了重组后的m3u8文件的URL，type属性指定了文件的MIME类型。

请确保将"reconstructed_m3u8_file.m3u8"替换为你实际使用的重组后的m3u8文件的URL。另外，如果你的Safari浏览器版本较旧，可能需要添加一些兼容性处理代码以确保视频的正常播放。

希望这可以帮助你解决问题！如果还有其他问题，请随时提问。

结合GPT给出回答如下请题主参考
首先，想要实现将m3u8文件中的加密数据存放在其他地方的功能，需要在服务器端进行相应的处理，比如将加密过的视频文件单独存放在一个文件夹中，并在m3u8文件中将对应的URL替换为新的路径。这个可以使用Node.js进行处理，可以使用fs模块读取m3u8文件，然后使用正则表达式匹配加密的URL，再将其替换为新的路径，最后再将修改后的内容保存到新的文件中。

以下是一个简单的Node.js代码示例：

const fs = require('fs');

// 读取m3u8文件，注意需要指定编码类型为utf-8，否则会出现乱码
fs.readFile('example.m3u8', 'utf8', (err, data) => {
  if (err) throw err;

  // 匹配加密的URL
  const regex = /EXT-X-KEY:(.*?)URI="(.*?)"/gm;
  let newData = data.replace(regex, (match, p1, p2) => {
    // 将加密的URL替换为新的路径
    return `EXT-X-KEY:${p1}URI="http://example.com/videos/encrypted/${p2}"`;
  });

  // 将修改后的内容保存到新文件中
  fs.writeFile('example_new.m3u8', newData, (err) => {
    if (err) throw err;
    console.log('m3u8 file successfully updated!');
  });
});

然后，可以在客户端使用video.js等HLS播放器进行播放，示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HLS Player</title>
    <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
    <script src="https://unpkg.com/video.js/dist/video.min.js"></script>
  </head>
  <body>
    <video-js id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
      <source src="http://example.com/videos/example_new.m3u8" type="application/x-mpegURL">
    </video-js>
    <script>
      var player = videojs('my-video');
    </script>
  </body>
</html>

注意需要将m3u8文件中加密的URL替换为服务器上实际存放加密文件的路径，然后再将m3u8文件传给video.js进行播放即可。

该回答引用ChatGPT，希望对题主有所帮助，如有帮助，还望采纳。

这个问题可能是Safari对于blob URL的请求方式导致的。你可以尝试使用URL.createObjectURL()方法来创建blob URL而不是使用(window.webkitURL || window.URL).createObjectURL()。注意，这种方法在使用完毕后需要调用URL.revokeObjectURL()方法进行释放。具体修改代码如下：

fetch('https://flv.pkgexs.com/t3/index.m3u8')
.then(response => response.text())
.then(data => {
    // 处理m3u8内容
    let modifiedM3U8 = data.replace('#EXT-X-KEY:00000', '#EXT-X-KEY:METHOD=AES-128,URI="https://flv.pkgexs.com/t3/enc.key",IV=0x46313b1b2545abd70f4025fc739789bb');
    console.log("修改后的M3u8数据：" + modifiedM3U8);
    var bb = new Blob([modifiedM3U8], { type: 'application/vnd.apple.mpegurl' }); //创建BLOB
    var bloburl = URL.createObjectURL(bb);  // 创建BLOB URL
    // 创建video元素
    const video = document.createElement('video'); 
    // 设置video属性
    video.src = bloburl;//blob url
    video.controls = true;
    video.autoplay = true; 
    // 添加到文档中
    document.body.appendChild(video); 
    // 查看 blob url 的内容
    getblob(bloburl)
})
.catch(error => {
    console.error('Fetch Error:', error);
}); 

function getblob(url){
    fetch(url)
    .then(response => response.text())
    .then(data => {
        console.log(data);
        URL.revokeObjectURL(url); // 释放blob URL
    })
    .catch(error => {
        console.error('Fetch Error:', error);
        URL.revokeObjectURL(url); // 处理异常时也需要释放blob URL
    });
}

这样修改后，应该就能正常在Safari浏览器上播放了。

safari浏览器，在打开视频的时候，先是发送一个请求探测文件的大小，之后再多次发送请求分段获取数据流的数据（个人理解大概是分段下载，Accept-Ranges）。
考虑方法1
a.需要根据请求内容的不同做出不同的响应，第一次探测请求需要返回200，后面的请求需要返回206和具体数据
b.contentType必须设置为video/mp4
可以参考：
https://blog.csdn.net/xiaotianna110/article/details/127206606

参考gpt
这个问题可能是由于Safari浏览器的行为导致的。Safari浏览器在加载视频时会自动发送Range请求头，以支持视频的流式传输和分段加载。当你使用Blob URL加载视频时，Safari浏览器会发送Range请求头来获取视频的部分内容。

解决这个问题的一种方法是在服务器端配置响应头，禁用Range请求。这样Safari浏览器就不会发送Range请求，而是一次性获取整个视频文件。具体的配置方法可以参考你使用的服务器软件的文档。

另外，你也可以尝试使用其他方法来加载修改后的m3u8文件，而不是使用Blob URL。例如，你可以将修改后的m3u8文件保存到服务器上，并使用服务器端返回的URL直接给video元素的src属性赋值，而不是使用Blob URL。

最后，建议你在苹果开发者论坛或社区中寻求更专业的帮助，因为他们可能会有更深入的了解和解决方案来处理Safari浏览器的特定问题。

确保修改后的m3u8文件的内容正确，包括加密数据的URI和IV等参数。可以使用文本编辑器或打印调试信息来验证修改后的m3u8文件的内容是否正确

引用皆我百晓生小程序回复内容作答：
这个问题可能是由Safari浏览器的行为导致的。Safari浏览器在加载视频时，会在请求过程中使用Range头，这是一种分段请求的方式。您可以尝试通过以下方法解决这个问题：

添加CORS头：在返回修改后的m3u8文件的服务器端响应头中添加"Access-Control-Allow-Origin"头并设置为"*"，以便允许跨域访问。
修改Blob的MIME类型：将Blob的MIME类型从"application/vnd.apple.mpegurl"更改为"video/mp4"，这样Safari可能会更好地处理它。
使用XHR：尝试使用XMLHttpRequest（XHR）而不是fetch来获取m3u8文件。在XHR请求中，您可以尝试使用abort()方法来中止请求，然后再次发送新的请求。
使用第三方库：考虑使用一些针对hls播放的第三方库，如video.js或hls.js。这些库可以处理更复杂的hls播放情况，并且对不同浏览器的兼容性更好。

请注意，这只是一些可能的解决方案，因为Safari的行为可能因浏览器版本和设置而略有不同。您可能需要不断尝试并进行进一步的调试来找到适合您具体情况的解决方案。同时，确保您的代码和相关资源符合直播协议（HLS）的规范和要求。

如果以上的方法无法解决问题，请您考虑在Safari上寻求更专业的技术支持以获取更具体的解决方案。