VideoJS根据浏览器选择源

Question

我有一个破折号和一个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信息和许多选项。你能帮我一个示例吗？

Answer 1

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

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

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

大多数浏览器此时不直接支持这些HLS和DASH“清单”文件（Safari确实支持HLS作为例外）。你需要使用像video.js，Shaka，BitMovin等HTML5播放器。

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

您可以从上面看到HTML5播放器（如video.js等）必须检查它们正在运行的浏览器以及可用于流的最佳选择的流类型。

回到你的问题，你可以在你的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一起使用。