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

Question

我想实现一个功能，将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，导致无法播放，有谁知道这个问题如何解决？

Answer 1

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