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

Question

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

Joh*_*ith 2 html video http-live-streaming

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

我检查过其他类似的问题，但似乎都不起作用，因为 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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Joh*_*ith 6

好的，我找到了使用 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>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Mic*_*ick 5

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

目前，桌面 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，但是这些插件需要用户安装该插件，而上述播放器应该适用于任何主要桌面浏览器的日期浏览器版本。

归档时间：	5 年，6 月前
查看次数：	16208 次
最近记录：	5 年，6 月前