如何为Shaka Player的Manifest请求添加自定义头并构建可用浏览器播放器

可用播放器完整代码 #

<head>
<!-- Shaka Player ui compiled library: -->
<!-- <script src='dist/shaka-player.ui.js'></script> -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/shaka-player/3.0.7/shaka-player.ui.min.js' integrity='sha512-KpD7UW8aOliftdEvclj0KBnwh6vKS708SS41xCNr11yjCSAcYxb4+tlaQTfK+GDw2VCv2DxiM2Zu1d3+WqXw+g==' crossorigin='anonymous'></script>
<!-- Shaka Player ui compiled library default CSS: -->
<!-- <link rel='stylesheet' type='text/css' href='dist/controls.css'> -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/shaka-player/3.0.7/controls.min.css' integrity='sha512-XLwXArwaPbtdmlcbaeNgSF3cBB4Q7T7ptfhEfpkDIc/gkvKk8S413yzTByJ7X9dgOZR/T7NxrQI0HE4hlc+2GQ==' crossorigin='anonymous' />
<!-- Chromecast SDK (if you want Chromecast support for your app): -->
<script defer src='https://www.gstatic.com/cv/js/sender/v1/cast_sender.js'></script>
<!-- Your application source: -->
</head>
<body>
<div data-shaka-player-container style='max-width:40em'
     data-shaka-player-cast-receiver-id='930DEB06'>
    <video autoplay data-shaka-player id='video' style='width:100%;height:100%'></video>
</div>
</body>
<script>
   const manifestUri = 'https://live-stream-manifest.mpd';
   const licenseServer = 'https://widevine-license.com';
   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:{servers:{'com.widevine.alpha':licenseServer}}});

    // 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);

    player.getNetworkingEngine().registerRequestFilter(function(type, request) {
      // 许可证请求添加自定义头
      if (type == shaka.net.NetworkingEngine.RequestType.LICENSE) {
        request.headers['licName1'] = 'licValue1';
        request.headers['licName2'] = 'licValue2';
      }
      // Manifest清单请求添加自定义头
      if (type == shaka.net.NetworkingEngine.RequestType.MANIFEST) {
        request.headers['manName1'] = 'manValue1';
        request.headers['manName2'] = 'manValue2';
      }
    });

    // 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>

核心修改说明 #

• 基于原有代码仅在请求过滤器中新增了Manifest类型请求的判断逻辑，匹配到清单请求时自动添加指定的自定义头
• 原有许可证请求头配置、播放器基础逻辑完全保留，无需额外调整

内容的提问来源于stack exchange，提问作者ABDULWAHAB KABANGA