VideoJS根据浏览器选择来源答案

【问题标题】：VideoJS select the source according to browserVideoJS根据浏览器选择来源
【发布时间】：2019-05-11 21:37:02
【问题描述】：

我有一个破折号和一个 HLS 流。我可以在 safari chrome 和 edge 上分别播放它们。但是，我想创建一个播放器并检测浏览器，以便将正确的配置作为源传递给播放器。

我尝试了类似以下的方法

myPlayer.src([
  { type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" },
  { type: "video/webm", src: "http://www.example.com/path/to/video.webm" },
  { type: "video/ogg", src: "http://www.example.com/path/to/video.ogv" }
]);

但是，它只播放第一个，如果第一个是破折号流并且您在 safari 中打开它，则会出现错误。以上只是示例，我的来源有 DRM 信息和许多选项。你能帮我举个例子吗？

【问题讨论】：

这个帖子有用吗？ stackoverflow.com/questions/9847580/…
感谢它的工作，但我认为可能有与上述示例类似的解决方案。我可以像上面的例子一样让 playready 和 widebine 工作，但它不适用于 playready widevine 和 fairplay。

标签： browser video.js http-live-streaming drm mpeg-dash

【解决方案1】：

DRM 与打包或流式传输协议之间的交互有点复杂。

HLS 和 DASH 是自适应比特率流协议。服务器创建视频的多个分段比特率版本，这允许客户端设备或播放器以块（例如 10 秒块）下载视频，并从最适合当前网络条件的比特率中选择下一个块。另请参阅此答案中的更多信息：https://stackoverflow.com/a/42365034/334402

有一个索引或清单文件，它只是一个文本/XML 文件，列出不同的视频、音频、字幕等流并证明它们的 URL。这是 .mpd 或 .m3u8 文件。

大多数浏览器目前不直接支持这些 HLS 和 DASH 'manifest' 文件（Safari 确实支持 HLS 作为一个例外）。您需要使用 HTML5 播放器，例如 video.js、Shaka、BitMovin 等。

DRM 允许加密内容并在服务器和客户端之间安全地共享内容的密钥。

作为一般规则，设备和浏览器原生支持以下 DRM - 天真意味着 DRM 通常在您购买设备时内置于操作系统或浏览器中：

Android 设备 - Widevine
PC 或 MAC 上的 Chrome 浏览器 - Widevine
FireFox - Widevine
iOS 设备 - FairPlay
Safari 浏览器 - FairPlay
Internet Explorer 浏览器 - PlayReady

DRM 和打包之间的交互有点复杂 - MPEG-DASH（通常简称为 DASH）旨在成为行业标准，Google 和 MS 似乎都喜欢它，但 Apple 设备仍然喜欢 HLS。

DASH 支持 CENC，它允许单个流支持多种 DRM 类型。 HLS 通常与 FairPlay 一起使用，尽管它也可以支持其他方案。

因此，需要注意的是，这不是绝对的，可以找到其他示例，此时服务到达所有设备的典型情况是：

MPEG-DASH - 具有 Widevine 和 PlayReady DRM 的单流
带有 FairPlay DRM 的 HLS

您可以从上面看到，像 video.js 等 HTML5 播放器必须检查它们正在运行的浏览器以及可用的流类型才能做出最佳的流选择。

回到您的问题，您实际上可以在 video.js 配置中指定 HLS 和 DASH 流，而不是像上面的代码提取中那样指定 mp4、web 等。这看起来像：

var player = videojs('some-video-id');

player.src({
  src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',
  type: 'application/x-mpegURL',
  withCredentials: true
});

此示例来自 https://github.com/videojs/http-streaming，它现在是标准 video.js 构建的一部分。示例文档非常重 HLS，但它也应该适用于 DASH。

【讨论】：

【解决方案2】：

我遇到了同样的问题。我正在使用 VideoJs 浏览器模块 (https://docs.videojs.com/module-browser.html) 来检查浏览器并使用适当的源。该模块具有不同的功能，您可能需要根据需要选择不同的模块。

我的实现是这样的：

if (videojs.browser.IS_ANY_SAFARI) 
    player.src({src: <HLS source>, type: 'application/x-mpegURL'})
else
    player.src({src: <Dash source>, type: 'application/dash+xml'})

【讨论】：