从具有HTML视频标签的服务器播放HLS文件

Question

所以我想做的是从我拥有的Backblaze B2存储桶（通过B2的S3 API）播放HLS m3u8文件。我的问题是HLS文件由两个.m3u8文件组成，该文件跟踪所有.ts文件，这些文件是.m3u8文件需要播放的部分。因此，我的问题是，将.m3u8文件放入HTML视频代码中时，即使在兼容HLS文件的浏览器（即Google Chrome浏览器）中也没有任何反应。

我已经检查了其他类似的问题，但似乎都不起作用，因为ts文件始终丢失。

我知道问题是.ts文件丢失，但是我不知道如何从Web服务器中引用它们。我可以通过某种方式播放HTML视频标签中的HLS文件及其所有部分吗？

我当前的代码如下：

    <video width="1920" height="1080" controls>
     <source src="https://f002.backblazeb2.com/file/ARandomBucket/index.m3u8" type="application/x-mpegURL">
     Your browser does not support the video tag.
   </video>

Answer 1

不同的浏览器对视频文件和流格式具有不同的支持。

当前Desktop Safari和Edge最新版本支持'native'HLS支持，但Desktop Chrome不支持。您可以在许多地方看到最新的支持信息，例如：

• https://html5test.com/compare/feature/streaming.type.hls.html

在此情况下，通过“本机”，这意味着浏览器可以将流格式或文件类型作为HTML5标签中的“源”属性包含在其中，而无需任何其他代码或插件等就可以播放它。

为了允许您此时在Chrome上播放文件，通常的方法是使用Javascript视频播放器，该播放器将使用浏览器对Media Source Extensions（MSE）的支持来解释并准备HLS蒸汽进行播放。一些常见的开源示例包括：

• Video.js（https://github.com/videojs/video.js）
• Shakaplayer（https://github.com/google/shaka-player/）

如果出于某种原因您不想使用上述播放器之一，Chrome也可以使用这些播放器播放HLS，但是这些插件需要用户安装该插件，而以上播放器应该可以在任何播放器上运行主要桌面浏览器的最新浏览器版本。

Answer 2

好的，我已经找到了使用video.js + video.js http流的解决方案。