当视频 src 在 videojs 中动态更改时，m3u8 文件不播放

Question

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

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

使用这些视频 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>

组件代码

 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>

Answer 1

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

我用过videojs-playlist 在我的 index.html 中更改视频源 dynamically.Included videojs-playlist js 文件，并在我选择的视频方法中添加一个简单的片段。

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

它解决了我 problem.it 动态更改 src 的问题

当视频 src 在 videojs 中动态更改时，m3u8 文件不播放

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

http-live-streaming

video.js

m3u8

angular

当视频 src 在 vi​​deojs 中动态更改时，m3u8 文件不播放

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

http-live-streaming

video.js

m3u8

angular

当视频 src 在 videojs 中动态更改时，m3u8 文件不播放