m3u8 file is not playing when the video src is change dynamically in videojs

Question

I have tried some ways on this issue,but i could not find it, I am using videojs with contrib hls,its working for first time.

with m3u8 files, when I call videojs the first time with ngOnit its working,but if i change the dynamic src url, its showing the error, I am just changing the src url and appending to video js src ,but here i am getting media could not be loaded due to server or network error. but if i use the mp4 mime type its working fine,and changing the dynamic src url is also working, can any one help me on this hls with m3u8 file?

using these videojs files:index.html

<link href="//vjs.zencdn.net/5.11/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.11/video.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/3.6.4/videojs-contrib-hls.min.js"></script>

component code

 export class PlayVideoComponent implements OnInit, AfterViewInit {
   @Input() selectedVideo: VideoFile;
    public videoUrl: string;
    private videoJSplayer: any;

   constructor(private authenticationService: AuthenticationService){}

   selectedVideo(video:VideoFile) { // passing new video object 
       this.selectedVideo = video;   
       this.videoUrl = this.selectedVideo.videoPath;
       this.videoUrl = this.videoUrl + '?access_token='+ this.authenticationService.access_token;  
   }

 ngOnInit() {

        this.videoUrl = this.selectedVideo.videoPath;
        this.videoUrl = this.videoUrl + '?access_token='+ this.authenticationService.access_token;
        console.log('video url is ' + this.videoUrl); 

}

 ngAfterViewInit() {

        this.videoJSplayer = videojs('example_video_11', {}, function() { 
            this.play();
         });
}

component html code:

<video id="example_video_11" class="video-js vjs-default-skin"
        controls preload="auto" data-setup='{"example_option":true}'>
      <source [src] = videoUrl type="application/x-mpegURL" />  
   </video>

Answer 1

It took 2 days to found the correct solution.

I have used videojs-playlist to change the video source dynamically.Included videojs-playlist js file in my index.html and added a simple snippet in my selected video method.

selectedVideo(video:VideoFile) { // passing new video object 
 this.selectedVideo = video;   
 this.videoUrl = this.selectedVideo.videoPath;
 this.videoUrl = this.videoUrl + '?access_token='+ this.authenticationService.access_token;  
 let self = this;
 this.videoJSplayer.playlist([{
            sources: [{
                     src: self.videoUrl,
                     type: 'application/x-mpegURL'
                     }] }
                  ]);   
    }

its solved my problem.it's changing the src dynamically