如何向播放器发出的请求添加额外的 headers / 查询参数？

Question

我在请求使用 Bitmovin 播放器从服务器播放视频时尝试发送自定义 header。下面是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>TEST</title>
  <meta charset="UTF-8"/>
 
  <!-- bitdash player -->
  <script type="text/javascript" src="https://bitmovin-a.akamaihd.net/bitmovin-player/stable/7.5/bitmovinplayer.js"></script>

  
</head>
<body background="http://bitmovin-a.akamaihd.net/webpages/bitmovin/images/background.jpg">
<div class="container">
  <h1>HTML5 Adaptive Streaming Player for MPEG-DASH & HLS</h1>
  <h2>Your videos play everywhere with low startup delay, no buffering and in highest quality.</h2>
  <div id="webserver-warning">
    <div class="ca-content">
      <h1>Unsupported Protocol</h1>
      <h2>This file has been loaded using the unsupported "file" protocol. Please use a <a href="http://wiki.selfhtml.org/wiki/Webserver/lokal" target="_blank">web server</a> and open this page using http or https.</h2>
    </div>
  </div>
  <div class="content">
    <div class="player-wrapper">
      <div id="player"></div>
    </div>
    <div class="description">
      <p>For more information about the bitmovin player, please have a look at our online <a href="//bitmovin.com/support" target="_blank">Developer Section</a>.</p>
    </div>
  </div>

</div>
<div id="player"></div>
<script type="text/javascript">
    var conf = {
        key:       "b9c7c8b6-4af5-453e-8020-0a79672c6d5a",
        source: {
          hls:         "//bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
        }
        network: {
            //Adding a custom header to each manifest request
            preprocessHttpRequest: function (type, request) {
                if (type === bitmovin.player.network.REQUEST_TYPE.MANIFEST_DASH) {
                    request.method = 'GET';
                    request.headers.push({
                        name: 'User-Agent',
                        value: 'Mozilla/5.0 (Windows NT 6.1; WOW64)'
                    });
                    return Promise.resolve(request);
                }
            }
        }
    };
    var player = bitmovin.player("player");
    player.setup(conf).then(function(value) {
        // Success
        console.log("Successfully created bitmovin player instance");
    }, function(reason) {
        // Error!
        console.log("Error while creating bitmovin player instance");
    });
</script>
</body>
</html>

但是播放器没有加载。怎么了？以及如何正确传递 header ？或建议任何可以在请求视频服务器期间发送自定义 header 的播放器

Answer 1

嗨舒巴姆，

您的示例在播放器配置中存在语法错误。缺少源配置后的逗号“,”。因此，Javascript 执行失败，播放器不会按预期加载。

此外，您使用的是 HLS 源，但您在 preprocessHttpRequest 回调函数中检查了 MPD-URL，因此它从未被执行过。请参阅播放器 API 参考，其中说明所有 available request types

请注意，向 XHR 请求添加自定义 header 会导致预检请求，这要求接收方在其 access-control-allow-headers 设置中允许此特定 header CORS配置。否则，预检请求将失败，您将无法播放内容。有关此主题的更多详细信息，请参见 here

我准备了一个例子，展示了它的样子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://bitmovin-a.akamaihd.net/bitmovin-player/stable/7.5/bitmovinplayer.js"></script>
</head>

<body>
<div id="player"></div>
<script type="text/javascript">
    var player = bitmovin.player("player");

    var conf = {
        key: "YOUR_PLAYER_LICENSE_KEY_HERE",
        source: {
            dash: "http://vm2.dashif.org/livesim-dev/periods_1/testpic_2s/Manifest.mpd",
            title: "Bitmovin Player " + bitmovin.player.version,
            description: "This is a configuration example, which shows how you can add query parameters using the network API",
        },
        network: {
            preprocessHttpRequest: function (requestType, requestConfig) {
                //Please see https://developer.bitmovin.com/hc/en-us/articles/115001561533#enums/playerconfigapi.httprequesttype.html for all available request types
                if (requestType === bitmovin.player.network.REQUEST_TYPE.MANIFEST_DASH) {
                    console.log("request Type: ", requestType);
                    console.log("request Config: ", requestConfig);

                    //Adding a custom header to the manifest request
                    //requestConfig.headers.push({name: "your-customer-header-name", value: "your-custom-header-value"});

                    //Adding a customm query parameter to the manifest request
                    //requestConfig.url = requestConfig.url + "?yourcustom=queryparam";

                    return requestConfig;
                }
            }
        }
    };

    player.setup(conf).then(function (playerInstance) {
        console.log("Successfully created Bitmovin player instance", playerInstance);
    }, function (reason) {
        console.log("Error while creating Bitmovin player instance", reason);
    });

</script>
</body>
</html>

如何向播放器发出的请求添加额外的 headers / 查询参数？

How can I add additional headers / query parameters to requests issued by the player?

video-streaming

custom-headers