使用 HTML 视频标签从服务器播放 HLS 文件

Question

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

我已经检查了其他类似的问题，但是 none 似乎有效，因为 ts 文件总是丢失。

我知道问题是缺少 .ts 文件，但我不知道如何从我的网络服务器中引用它们。有什么办法可以通过 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

在此上下文中，'native' 表示当 HTML5 标签中包含 'source' 属性时，浏览器可以识别流媒体格式或文件类型并播放它没有任何进一步的代码或插件等

为了让您现在可以在 Chrome 上播放您的文件，通常的方法是使用 Javascript 视频播放器，它将使用浏览器对媒体源扩展 (MSE) 的支持来解释并准备 HLS steam 进行播放。一些常见的开源示例包括：

Video.js (https://github.com/videojs/video.js)
Shakaplayer (https://github.com/google/shaka-player/)

如果您出于某种原因不想使用上述播放器之一作为您的解决方案，那么 Chrome 也可以使用插件来播放 HLS，但是这些插件要求用户安装插件，而上述播放器应该适用于主要桌面浏览器的任何最新浏览器版本。

Answer 2

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

我需要在我的 Backblaze B2 桶上设置我的 CORS 规则，它是屏幕上的一个设置，你所有的桶都为 "Share everything in this bucket with all origins."

接下来我只是使用了这个代码段，同时使用了 video.js 和它的插件，用于所有主要浏览器的 hls 流，它是视频流 https。他们都只需要来自各自 cdns 的简单脚本标签。

您需要的文档可在此处找到：https://videojs.com/getting-started/ and here: https://github.com/videojs/http-streaming 您需要两者，因为它们执行不同的功能。所以我找到的最终适用于我的情况的代码是：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>My Video</title>
    <link href="https://vjs.zencdn.net/7.7.6/video-js.css" rel="stylesheet" />
    <!-- For IE8 (for Video.js versions prior to v7)
    <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
    -->
  </head>
  <body>
   <h1>My Video</h1>
   <video-js id="my_video_1" class="vjs-default-skin" controls preload="auto" width="640" height="268">
    <source src="https://f002.backblazeb2.com/file/ARandomBucket/index.m3u8" type="application/x-mpegURL">
   </video-js>
   <!--This is for Video.js by itself -->
   <script src="https://unpkg.com/video.js/dist/video.js"></script>
   <!--This is for HLS compatibility with all major browsers-->
   <script src = "https://unpkg.com/browse/@videojs/http-streaming@1.13.3/dist/videojs-http-streaming.min.js"></script>
   <script>
    var player = videojs('my_video_1');
   </script>
  </body>
</html>

使用 HTML 视频标签从服务器播放 HLS 文件

Playing HLS file from a server with a HTML video tag

html

video

http-live-streaming