如何使用 HTML5 <video> 标签播放 CENC 加密的 MP4 视频？答案

【问题标题】：How do I play back CENC-encrypted MP4 video using the HTML5 <video> tag?如何使用 HTML5 <video> 标签播放 CENC 加密的 MP4 视频？
【发布时间】：2015-12-26 07:31:04
【问题描述】：

我正在尝试通过以下选项播放我使用 MP4box 进行 CENC 加密的视频：

MP4Box -crypt drm_file_gpac_clear.xml BigBuckBunny.mp4 -out BigBuckBunny_cenc.mp4

XML 文件指定 clearKey 加密的位置。取自 GPAC 的网站https://gpac.wp.mines-telecom.fr/mp4box/encryption/common-encryption/

<?xml version="1.0" encoding="UTF-8"?>
<GPACDRM type="CENC AES-CTR">
<DRMInfo type="pssh" version="1" cypherOffset="9" cypherKey="0x6770616363656E6364726D746F6F6C31" cypherIV="0x00000000000000000000000000000001">
<BS ID128="0x6770616363656E6364726D746F6F6C31"/>
<BS value="2" bits="32"/>
<BS ID128="0x279926496a7f5d25da69f2b3b2799a7f"/>
<BS ID128="0x676cb88f302d10227992649885984045"/>
<BS bits="8" string="CID=Toto"/>
<BS ID128="0xccc0f2b3b279926496a7f5d25da692f6"/>
<BS ID128="0xccc0f2b3b279926496a7f5d25da692d6"/>
</DRMInfo>
<CrypTrack trackID="1" IsEncrypted="1" IV_size="16" first_IV="0x0a610676cb88f302d10ac8bc66e039ed" saiSavedBox="senc">
<key KID="0x279926496a7f5d25da69f2b3b2799a7f" value="0xccc0f2b3b279926496a7f5d25da692f6"/>
</CrypTrack>
</GPACDRM>

要播放这个，我有一个 HTML 文件，其中包括：

<video  autoplay id="video1" controls src="BigBuckBunny_cenc.mp4" type="video/mp4"></video>

还有 JS：

var KEY = new Uint8Array([
  0xcc, 0xc0, 0xf2, 0xb3, 0xb2, 0x79, 0x92, 0x64,   // this is key for MP4 file
  0x96, 0xa7, 0xf5, 0xd2, 0x5d, 0xa6, 0x92, 0xf6    // encrypted with drm_file_gpac_clear.xml
]);

var config = [
  {
    initDataType: "cenc",
    videoType: "video/mp4",
  }
];

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

加上这里不相关的其他代码，因为我的问题是“加密”事件没有被触发。

如果我用一个未加密的文件代替加密的文件，这可以正常运行，如果我从http://simpl.info/eme/clearkey/ 替换一个 WEBM 文件并相应地更改密钥和配置（该 URL 上的“查看页面源”），它也可以正常运行详情）。所以它会播放一个加密文件（在这种情况下，当然会触发 'encrypted' 事件），但不是我用 MP4box 加密的文件。

我已经在 IE 11.0.9600.18036、Firefox 41.0、Chrome 45.0.2454.93 m 和 Chrome 47.0.2516.0 canary（64 位）中尝试过。

我用 MP4 Explorer 查看了 MP4 文件，它有我被告知期望的框，例如 encv、sinf 和 schm。

我最近几周才尝试了解 CENC，所以这都是相对较新的，我可能犯了一些明显的错误。如果有人可以提供帮助，我将不胜感激。

【问题讨论】：

看来您的代码实际上可以播放 CENC 加密视频，正如您使用 simple.info 中的 WEBM 文件所证明的那样。您的代码可能与 MP4 有一些问题，但问题似乎更可能是 CENC 加密步骤。你能分享视频的链接吗？
可以给我们chrome://media-internals/的内容吗？加载文件时，应显示“video_decoder DecryptingVideoDecoder”。如果没有，则浏览器不会将其检测为加密流。

标签： javascript html video encryption

【解决方案1】：

我在https://github.com/gpac/gpac/issues/265（一个 GPAC/MP4box 论坛）上提出了同样的问题，并得到了 rbouqueau 的回复

我现在没有时间给出详细的答案，但它可以工作。您应该能够在 github 上找到其他人的示例或在我们之前的 sourceforge 跟踪器/论坛上。

在您的情况下有什么问题是加密方案：您使用的是 GPAC 特定的一个，而您可能是指使用 ClearKey 或 Widevine/Playready 取决于您的目标平台。

就目前而言，这似乎是正确的。由于原始文件中的注释，我认为 xml 文件正在使用 ClearKey：

反正不是，所以我一直在寻找一个使用 ClearKey 的等效文件。

这些可能会有所帮助：

googlegroups.com/a/chromium.org/group/graphics-dev/attach/dcaad1f1cb85e3eb/Clearkey_encryption_using_MP4BOX.pdf

html5.cablelabs.com/mse-eme/doc/creation.html

dvcs.w3.org/hg/html-media/raw-file/ff10d356cc07/encrypted-media/cenc-format.html （见第 4 节）

但是，我还没有让它工作......但希望以上内容仍然可以帮助其他人解决这个问题。

【讨论】：