Angular 8 Dynamic Videojs with Hls.xhr.beforeRequest Issue

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();
  })


}

i am working with videojs on angular 8 application ,i am creating the video dynamically ,from api i am getting "url: "https://duhl5iw5mc3vb.cloudfront.net/HLS/public/course/2/23666/23666-master-playlist.m3u8" and also queryParam: "Policy=eyJTdGF0ZW1lbnQiOlt7I"

so i a appending this url and policy and giving it to the videojs to play.(like https://duhl5iw5mc3vb.cloudfront.net/HLS/public/course/2/23666/23666-master-playlist.m3u8?policy=eyJTdGF0ZW1lbnQiOlt7I)

but the problem is if i have many video only last video is playing ,bcoz the policy for last video url is appending with all the video url,but for me each URL the policy should be different.

please help me to solve this issue

Answer 1

videojs.Hls.xhr.beforeRequest is called before each XHR request, and it's global.

So you will have to declare videojs.Hls.xhr.beforeRequest outside the loop like below, and handle the business for each request in the method based on 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;
};