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

【问题标题】：Playing HLS file from a server with a HTML video tag使用 HTML 视频标签从服务器播放 HLS 文件
【发布时间】：2020-09-08 00:06:40
【问题描述】：

所以我要做的是从我拥有的 Backblaze B2 存储桶中播放 HLS m3u8 文件（通过 B2 的 S3 API）。我遇到的问题是 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>

【问题讨论】：

标签： html video http-live-streaming

【解决方案1】：

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

我需要在我的 Backblaze B2 存储桶上设置我的 CORS 规则，它是在屏幕上与所有存储桶一起设置为“与所有来源共享此存储桶中的所有内容”。

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

您需要的文档可以在此处找到：https://videojs.com/getting-started/ 和此处：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>

【讨论】：

【解决方案2】：

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

当前桌面 Safari 和 Edge 最新版本支持“本机”HLS 支持，但桌面 Chrome 不支持。您可以在多个位置查看最新的支持信息，例如：

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

在这种情况下，“本机”意味着浏览器可以识别流格式或文件类型，当它作为“源”属性包含在 HTML5 标记中时，无需任何其他代码或插件等即可播放。

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

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

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

【讨论】：

Edge 因为切换到 WebKit 不再支持这个