问如何向播放机发出的请求中添加额外的标头/查询参数？
EN

Stack Overflow用户

提问于 2018-01-08 06:25:56

回答 1查看 1.4K关注 0票数 0

我试图发送自定义标题时，要求播放一个视频从服务器使用Bitmovin播放器。下面是我的代码

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

但玩家没有加载。出什么事了？以及如何正确传递标头？或建议任何可在请求期间向视频服务器发送自定义标头的播放器。

video-streaming

custom-headers

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-02-14 09:32:52

嗨舒布姆，

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

此外，您使用的是HLS源，但是在您的preprocessHttpRequest回调函数中检查了MPD，因此它永远不会被执行。请参阅player API引用，其中声明了所有可用请求类型。

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

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48145227

复制

相似问题

问如何向播放机发出的请求中添加额外的标头/查询参数？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何向播放机发出的请求中添加额外的标头/查询参数？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何向播放机发出的请求中添加额外的标头/查询参数？
EN