在播放实时流时将参数添加到每个m3u8和ts文件中

Question

我正在实时流式传输环境中使用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文件中。

Answer 1

我自己找到了答案。以下代码段显示了如何在videojs的http-streaming library的帮助下执行此操作-

<script src="https://unpkg.com/@videojs/[email protected]/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>