在播放直播时将参数附加到每个 m3u8 和 ts 文件答案

【问题标题】：Appending paramaters to each m3u8 and ts file while playing live stream在播放直播时将参数附加到每个 m3u8 和 ts 文件
【发布时间】：2019-12-09 08:20:08
【问题描述】：

我在直播环境中使用 videojs 并使用 nginx 安全 URL 来保护流。详情见这里-https://www.nginx.com/blog/securing-urls-secure-link-module-nginx-plus/

算法运行良好，播放器能够检测到 live.m3u8 文件何时可用。但是，在播放流时，我只是得到一个旋转的轮子。在 JS 控制台上，我看到子播放列表，例如live_109.m3u8 URL 没有所需的 md5 哈希和过期时间戳，因此 nginx 返回 403。

流 URL 格式为 -

https://example.com/video/live.m3u8?md5=xznbbmbbbbbxncb&expire=123456788

当我播放流时，控制台提示播放器现在正在尝试调用

https://example.com/video/live_109.m3u8

由于没有 md5 和 expiry 参数，nginx 将发送 403，我明白了。

添加 ?md5=xznbbmbbbbbxncb&expire=123456788 也适用于 live_109.m3u8。

我确信单个段（.ts 文件）也会出现同样的问题

我的问题是如何将?md5=xznbbmbbbbbxncb&expire=123456788 附加到从页面调用的每个 .m3u8 和 .ts 文件中。

【问题讨论】：

标签： nginx video.js live-streaming

【解决方案1】：

我自己找到了答案。下面的 sn-p 展示了如何在 videojs 的http-streaming library 的帮助下做到这一点 -

<script src="https://unpkg.com/@videojs/http-streaming@1.11.2/dist/videojs-http-streaming.js"></script>

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{}'>
  </video>

  <script>
    videojs.Hls.xhr.beforeRequest = function(options){
      options.uri = options.uri+'/liveout/?md5=_PwgAm2z_kO8FgmWRWXvhQ&expires=1574698730';
      //.replace('cloudfront.net', 'foo.com');
      console.log(options);
      return options;
    };
    var player=videojs('my_video_1');
    player.ready(function() {
      this.src({
        src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',
        type: 'application/x-mpegURL'
      });

    });    
  </script>

【讨论】：