javascript - Safari 和 IE 浏览器中 DRM 内容的加密事件等效项

Question

我们在 Chrome 浏览器中使用加密事件来了解视频内容受 DRM 保护，当我们的播放器收到该事件时，我们开始创建 session 并向服务器请求 DRM key 。但Safari和IE浏览器不支持该事件。谁能建议我们需要监听 Safari 等其他浏览器的哪个事件才能知道视频因受 DRM 保护而停止播放？

Answer 1

首先，值得一提的是，现在所有主流浏览器的最新版本都支持加密媒体扩展(EME)来播放加密的流媒体视频。如果您使用的是常见的第 3 方 Javascript 播放器之一，例如BitMovin 或 JWPlayer，那么跨浏览器播放加密内容应该“正常”。

EME 是一种扩展机制，允许基于 HTML5 视频功能的浏览器检测加密内容、请求 key 并使用 key 解密并安全地播放加密内容。

EME本身是一个API，定义了应用程序、浏览器、媒体播放器和CDM(内容解密模型)之间的交互。它是由 W3.org 指定的，下图是最新规范，可以很好地体现流程:

您可以看到浏览器从 CDN(不是 CDM...)接收媒体时检测到该媒体已加密。浏览器将创建一个“加密”事件并将其发送回您的应用程序(或任何已注册监听视频事件的应用程序)。

AFAIAW，有两种方法可以查看加密事件 - 您可以像这样注册监听器(请参阅此示例 - https://www.html5rocks.com/en/tutorials/eme/basics/ ):

var video = document.querySelector('video');
video.addEventListener('encrypted', handleEncrypted, false);

或者您可以将其作为属性包含(请参阅上面链接的 EME 规范中的示例):

<video autoplay onencrypted='handleInitData(event)'></video>

但是，正如您所说，目前所有浏览器均不支持该事件 - 最新支持如下:https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/onencrypted#Browser_compatibility

在不提供此支持的情况下，您可以做的一件事是查看视频元数据本身，以确定视频是否已加密。

对于 MPEG DASH 分段 MP4 视频，信息将位于以下一个或两个位置:

• 在 list 文件(mpd 文件)中。
• 在 mp4 流本身的 header 中 - PSSH“原子”或框。

大多数受 DASH 保护的文件都会在 list 中包含信息，并且应该很容易检查 - 它看起来像这样:

</AdaptationSet>
        <AdaptationSet segmentAlignment="true" group="1" maxWidth="852" maxHeight="480" maxFrameRate="24" par="16:9" lang="und">
            <ContentProtection schemeIdUri="urn:mpeg:dash:mp4protection:2011" value="cenc" cenc:default_KID="80399bf5-8a21-4014-8053-e27e748e98c0" />
            <ContentProtection value="ClearKey1.0" schemeIdUri="urn:uuid:e2719d58-a985-b3c9-781a-b030af78d30e">
                <clearkey:Laurl Lic_type="EME-1.0">https://drm-clearkey-testvectors.axtest.net/AcquireLicense</clearkey:Laurl>
            </ContentProtection>

此示例使用clearKey，但从您的 Angular 来看，重要的是 list 中存在“ContentProtection”属性。

同样，如果您的视频使用 HLS 进行流式传输，则 m3u8 播放列表(相当于 HLS list )将有一个指示符，表明媒体已加密，您可以检查该指示符。这是“EXT-X-KEY”标志:

#EXT-X-KEY:METHOD=AES-128,URI="http://AKeyServer/sceret.key"

视频播放器传输视频的方式使用 HTML5 媒体源扩展机制 ( https://www.w3.org/TR/media-source/ )。这允许您将视频源设置为本地对象而不是视频 URL。播放器能够查看 list 以获取他们想要播放的视频流的 URL，然后通过分块下载该视频 block ，并将其附加到本地“src”对象。浏览器视频播放器从该对象获取视频，就像它是常规视频文件源一样。

这里有一个广泛共享的示例，有助于演示该方法:https://developers.google.com/web/updates/2011/11/Stream-video-using-the-MediaSource-API

因此 Javascript 玩家实际上只需要知道 list 文件本身的 Url - 每个人都有不同的方式来获取它，但您可以通过查看 Github 上的源代码来了解 Shakaplayer 是如何做到这一点的 ( https://github.com/google/shaka-player )并搜索术语“manifestInput”(在撰写本文时正确) - 从这里您可以跟踪 Shakaplayer 如何接受此输入，解析 list 文件，然后播放视频流。