hls.js 在 chrome 中使用 vue 不更新 m3u8 播放列表

Question

我想在 mounted() 函数中部署 m3u8 格式的直播视频，使用：

if(Hls.isSupported()) {
    let video = this.$refs.videoPrueba2;
    let hls = new Hls();
    hls.loadSource('./HLS/out.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function () {
        video.play();
    });
}

但是，当页面加载时，播放器会加载播放列表中包含的所有视频，直到此时停止播放。它不播放正在创建的新 ts 文件。我必须按 CTRL + SHIFT + R（删除缓存并重新加载页面）才能看到带有新 ts 文件的视频。

我使用以下 ffmpeg 命令创建了 .m3u8 文件：

ffmpeg -re -i short.mp4 -c:v h264 -flags +cgop -g 30 -vf scale=-1:360 -hls_list_size 0 ./HLS/out.m3u8

我试过：

hls.loadSource('./HLS/out.m3u8');

在 setInterval 中，但没有帮助。

会不会是vue造成的内存泄漏，loadSource不知道从哪里加载？

Answer 1

是浏览器缓存的问题，通过替换解决：

app.use(express.static(path.join(__dirname, 'streams'), { maxAge: 31557600000 }));

与：

app.use(express.static(path.join(__dirname, 'streams'), { maxAge: 0 }));

hls.js 在 chrome 中使用 vue 不更新 m3u8 播放列表

hls.js in chrome using vue doesnt update m3u8 playlist

javascript

live-streaming

m3u8

vue.js

hls.js