通过 Shaka Player 和 Clearkeys 播放加密后的MPD
Shaka Player , Google 研发的一款开源支持DASH DRM的HTML5 播放器
如何通过 Shaka Player 利用获取到的 Key & Key ID 播放加密后的MPD
如何获取 Key & Key ID (Widevine) 请参考这里. 接下来，我们开始动手实操！
配置要求：
1. 最新的 Google Chrome / Microsoft Edge (Chromium) 版本2. Android / macOS / Windows 上的 Google Chrome / Microsoft Edge (Chromium)3. 此方法不支持 iOS/iPadOS (包括 iOS/iPadOS 上的 Google Chrome / Edge / Safari) 4. 若您已经安装Widevine L3 Guesser 这个插件，在使用这个 Clearkey 之前请删除该插件，否则 Shaka Player 会报错 6002
首先，满足以上的配置要求后，我们创建一个新的 HTML，并在 head 插入如下<script><!-- for non-UI builds: --><script src="https://ajax.googleapis.com/ajax/libs/shaka-player/3.2.0/shaka-player.compiled.js"></script><!-- or, for UI builds: --><script src="https://ajax.googleapis.com/ajax/libs/shaka-player/3.2.0/shaka-player.ui.js"></script><link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/shaka-player/3.2.0/controls.css">
接下来，我们开始配置 Shaka Player.您可以创建一个独立的 JavaScript 文件并通过 <script> 插入 HTML，或者直接使用 <script> tag这里以 <script> tag 做演示
<html><head><!-- for non-UI builds: --><script src="https://ajax.googleapis.com/ajax/libs/shaka-player/3.2.0/shaka-player.compiled.js"></script><!-- or, for UI builds: --><script src="https://ajax.googleapis.com/ajax/libs/shaka-player/3.2.0/shaka-player.ui.js"></script><link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/shaka-player/3.2.0/controls.css"></head><body><center> <div data-shaka-player-container style="max-width:40em" data-shaka-player-cast-receiver-id="1BA79154"> <!-- The data-shaka-player tag will make the UI library use this video element. If no video is provided, the UI will automatically make one inside the container div. --> <video autoplay data-shaka-player id="video" style="width:100%;height:100%"></video> </div></center><script>
const manifestUri = '已获取到Key ID & Key 的 MPD 文件 URL';
async function init() { // When using the UI, the player is made automatically by the UI object. const video = document.getElementById('video'); const ui = video['ui']; const controls = ui.getControls(); const player = controls.getPlayer();
player.configure({ drm: { clearKeys: { // 'key-id-in-hex': 'key-in-hex', '对应的 Key ID': '对应的 Key' } }});
// Attach player and ui to the window to make it easy to access in the JS console. window.player = player; window.ui = ui;
// Listen for error events. player.addEventListener('error', onPlayerErrorEvent); controls.addEventListener('error', onUIErrorEvent);
// Try to load a manifest. // This is an asynchronous process. try { await player.load(manifestUri); // This runs if the asynchronous load is successful. console.log('The video has now been loaded!'); } catch (error) { onPlayerError(error); }}
function onPlayerErrorEvent(errorEvent) { // Extract the shaka.util.Error object from the event. onPlayerError(event.detail);}
function onPlayerError(error) { // Handle player error console.error('Error code', error.code, 'object', error);}
function onUIErrorEvent(errorEvent) { // Extract the shaka.util.Error object from the event. onPlayerError(event.detail);}
function initFailed(errorEvent) { // Handle the failure to load; errorEvent.detail.reasonCode has a // shaka.ui.FailReasonCode describing why. console.error('Unable to load the UI library!');}
// Listen to the custom shaka-ui-loaded event, to wait until the UI is loaded.document.addEventListener('shaka-ui-loaded', init);// Listen to the custom shaka-ui-load-failed event, in case Shaka Player fails// to load (e.g. due to lack of browser support).document.addEventListener('shaka-ui-load-failed', initFailed); </script></body>
</html> 上传该HTML到服务器，访问，即可观看，可直接上传至 Github Pages.
效果如图所示：
配置要求：
1. 最新的 Google Chrome / Microsoft Edge (Chromium) 版本2. Android / macOS / Windows 上的 Google Chrome / Microsoft Edge (Chromium)3. 此方法不支持 iOS/iPadOS (包括 iOS/iPadOS 上的 Google Chrome / Edge / Safari) 4. 若您已经安装Widevine L3 Guesser 这个插件，在使用这个 Clearkey 之前请删除该插件，否则 Shaka Player 会报错 6002
首先，满足以上的配置要求后，我们创建一个新的 HTML，并在 head 插入如下<script><!-- for non-UI builds: --><script src="https://ajax.googleapis.com/ajax/libs/shaka-player/3.2.0/shaka-player.compiled.js"></script><!-- or, for UI builds: --><script src="https://ajax.googleapis.com/ajax/libs/shaka-player/3.2.0/shaka-player.ui.js"></script><link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/shaka-player/3.2.0/controls.css">
接下来，我们开始配置 Shaka Player.您可以创建一个独立的 JavaScript 文件并通过 <script> 插入 HTML，或者直接使用 <script> tag这里以 <script> tag 做演示
<html><head><!-- for non-UI builds: --><script src="https://ajax.googleapis.com/ajax/libs/shaka-player/3.2.0/shaka-player.compiled.js"></script><!-- or, for UI builds: --><script src="https://ajax.googleapis.com/ajax/libs/shaka-player/3.2.0/shaka-player.ui.js"></script><link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/shaka-player/3.2.0/controls.css"></head><body><center> <div data-shaka-player-container style="max-width:40em" data-shaka-player-cast-receiver-id="1BA79154"> <!-- The data-shaka-player tag will make the UI library use this video element. If no video is provided, the UI will automatically make one inside the container div. --> <video autoplay data-shaka-player id="video" style="width:100%;height:100%"></video> </div></center><script>
const manifestUri = '已获取到Key ID & Key 的 MPD 文件 URL';
async function init() { // When using the UI, the player is made automatically by the UI object. const video = document.getElementById('video'); const ui = video['ui']; const controls = ui.getControls(); const player = controls.getPlayer();
player.configure({ drm: { clearKeys: { // 'key-id-in-hex': 'key-in-hex', '对应的 Key ID': '对应的 Key' } }});
// Attach player and ui to the window to make it easy to access in the JS console. window.player = player; window.ui = ui;
// Listen for error events. player.addEventListener('error', onPlayerErrorEvent); controls.addEventListener('error', onUIErrorEvent);
// Try to load a manifest. // This is an asynchronous process. try { await player.load(manifestUri); // This runs if the asynchronous load is successful. console.log('The video has now been loaded!'); } catch (error) { onPlayerError(error); }}
function onPlayerErrorEvent(errorEvent) { // Extract the shaka.util.Error object from the event. onPlayerError(event.detail);}
function onPlayerError(error) { // Handle player error console.error('Error code', error.code, 'object', error);}
function onUIErrorEvent(errorEvent) { // Extract the shaka.util.Error object from the event. onPlayerError(event.detail);}
function initFailed(errorEvent) { // Handle the failure to load; errorEvent.detail.reasonCode has a // shaka.ui.FailReasonCode describing why. console.error('Unable to load the UI library!');}
// Listen to the custom shaka-ui-loaded event, to wait until the UI is loaded.document.addEventListener('shaka-ui-loaded', init);// Listen to the custom shaka-ui-load-failed event, in case Shaka Player fails// to load (e.g. due to lack of browser support).document.addEventListener('shaka-ui-load-failed', initFailed); </script></body>
</html> 上传该HTML到服务器，访问，即可观看，可直接上传至 Github Pages.
效果如图所示：
请注意，以上行为可能抵触串流平台 TOS ，本人不对以上行为造成的任何后果负责，请知悉！