Angular 8 个动态 Videojs Hls.xhr.beforeRequest 问题

Question

for (let index = 0; index < video.length; index++) 
{
  
  const options = {
    sources: [{
      src: video[index].url,
      type: 'application/x-mpegURL'
    }
    ],
  };      

  videojs.Hls.xhr.beforeRequest = function(options) {
    console.log('before request intialized');
    options.uri = options.uri + '?' + video[index].queryParam;
    return options;
  };      


  this.player = videojs('my_video_' + index, options, function onPlayerReady() {
    console.log('Player ready');
    const myPlayer = this, id = myPlayer.id();
    myPlayer.hlsQualitySelector();
  })


}

我正在 angular 8 应用程序上使用 videojs，我正在动态创建视频，从 api 我得到“url：”https://duhl5iw5mc3vb.cloudfront.net/HLS/public/course/2/23666/23666-master-playlist.m3u8" 和 queryParam: "Policy=eyJTdGF0ZW1lbnQiOlt7I"

所以我附加了这个 url 和政策并将其提供给 videojs 播放。（比如 https://duhl5iw5mc3vb.cloudfront.net/HLS/public/course/2/23666/23666-master-playlist.m3u8?policy=eyJTdGF0ZW1lbnQiOlt7I）

但问题是，如果我有很多视频，只有最后一个视频在播放，因为最后一个视频 url 的政策附加在所有视频 url 上，但对我来说每个 URL 政策应该不同。

请帮我解决这个问题

Answer 1

videojs.Hls.xhr.beforeRequest 在每个 XHR 请求之前调用，它是全局的。

所以需要像下面这样在循环外声明videojs.Hls.xhr.beforeRequest，在方法中根据URI处理每个请求的业务。

for (let index = 0; index < video.length; index++) 
{    
  const options = {
    sources: [{
      src: video[index].url,
      type: 'application/x-mpegURL'
    }
    ],
  };      
  this.player = videojs('my_video_' + index, options, function onPlayerReady() 
  {
    console.log('Player ready');
    const myPlayer = this, id = myPlayer.id();
    myPlayer.hlsQualitySelector();
  })   
}

videojs.Hls.xhr.beforeRequest = function(options) {
  console.log('before XHR Call');
  if(options.uri = path)
      options.uri = options.uri + '?' + pathQueryParam;
  else if(options.uri = path1)
      options.uri = options.uri + '?' + pathQueryParam1;
  return options;
};

Angular 8 个动态 Videojs Hls.xhr.beforeRequest 问题

Angular 8 Dynamic Videojs with Hls.xhr.beforeRequest Issue

video.js

angular

angular8