当videojs中的视频src动态变化时，m3u8文件不播放答案

【问题标题】：m3u8 file is not playing when the video src is change dynamically in videojs当videojs中的视频src动态变化时，m3u8文件不播放
【发布时间】：2017-05-08 14:11:56
【问题描述】：

我在这个问题上尝试了一些方法，但我找不到它，我正在使用带有 contrib hls 的 videojs，它是第一次工作。

使用 m3u8 文件，当我第一次使用 ngOnit 调用 videojs 时，它可以正常工作，但是如果我更改动态 src url，它会显示错误，我只是更改 src url 并附加到视频 js src，但这里我由于服务器或网络错误，无法加载媒体。但是如果我使用 mp4 mime 类型它工作正常，并且更改动态 src url 也可以工作，任何人都可以帮助我处理这个带有 m3u8 文件的 hls 吗？

使用这些 videojs 文件：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>

组件代码

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

组件html代码：

<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>

【问题讨论】：

标签： angular video.js http-live-streaming m3u8

【解决方案1】：

花了 2 天时间才找到正确的解决方案。

我用过videojs-playlist 动态更改视频源。在我的 index.html 中包含 videojs-playlist js 文件，并在我选择的视频方法中添加了一个简单的 sn-p。

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'
                     }] }
                  ]);   
    }

它解决了我的问题。它正在动态更改 src

【讨论】：