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" }
]);

但是，它仅播放第一个，并且如果第一个是破折号流并且您在野生动物园中将其打开，则会出现错误。以上仅是示例，我的资源提供了DRM信息和许多选项。您能帮我举个例子吗？

Answer 1

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

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

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

大多数浏览器目前不直接支持这些HLS和DASH“清单”文件（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，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构建的一部分。该示例文档非常繁琐，但也应与DASH一起使用。

Answer 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'})

VideoJS根据浏览器选择源

2 个答案: