Videojs 无法播放 m3u8 blob URL答案

【问题标题】：Videojs can't play m3u8 blob URLVideojs 无法播放 m3u8 blob URL
【发布时间】：2019-11-26 19:40:42
【问题描述】：

我正在使用 Videojs 版本 7.6.6。如果src 是一个blob URL，它将不会播放html5 video。但是，它将加载视频时间，但不会播放。我收到此警告，然后它会永远加载：

VIDEOJS: WARN: Problem encountered with the current HLS playlist. Trying again since it is the only playlist.

这是我的代码运行方式：

<video id="my_video" class="video-js vjs-matrix vjs-default-skin vjs-big-play-centered" controls 
preload="none" width="640" height="268" data-setup="{}"></video>

<script type="text/javascript" src="/js/video-766.min.js"></script>
<script>
fetch("https://server/hls/index.m3u8").then(result => result.blob())
    .then(blob => {
      var blobURL = URL.createObjectURL(blob);
      var player = videojs("my_video");
      player.src({ src: blobURL, type: "application/x-mpegURL" });
    }
    );
</script>

如果我在没有 blob 的情况下尝试它，只需一个 index.m3u8 文件的常规 URL，那么它就可以工作。所以这是我认为创建 blob URL 的问题。这有效，视频开始播放：

<video id="my_video" class="video-js vjs-default-skin" height="360" width="640" controls preload="none">
 <source src="https://server/hls/index.m3u8" type="application/x-mpegURL" />
</video>
<script>
    var player = videojs('my_video');
</script>

我已经搜索了这个问题并找到了很多，但没有一个对我有帮助。我创建 blob 是否错误？

【问题讨论】：

标签： blob video.js m3u8

【解决方案1】：

如果我没记错的话，为 blob 生成的对象 URL 将以 file:// 协议开头。浏览器不允许您使用file:// URL 加载数据。我遇到了类似的问题，所以我在我的应用程序上创建了一个简单的服务器，它通过 https:// 返回请求的文件。

index.m3u8 运行的原因是它通过 https 协议提供服务

【讨论】：