m3u8文件沒有播放，當視頻src在videojs中動態變化時

我嘗試了一些方法在這個問題上，但我找不到它，我使用videojs與contrib hls，其工作的第一次。m3u8文件沒有播放，當視頻src在videojs中動態變化時

與m3u8文件，當我第一次與ngOnit調用videojs它的工作，但如果我更改動態src網址，它顯示錯誤，我只是更改src url並追加到視頻js src，但在這裏由於服務器或網絡錯誤，我正在獲取媒體無法加載。但如果我使用MP4的MIME類型的工作正常，並更改動態SRC網址也工作，任何人可以幫助我在這個HLS M3U8文件？

使用這些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>

來源

2017-05-08 Sathish Kotha

花了2天，找到了正確的解決方案。

我已經使用videojs-playlist 動態更改視頻源。在我的index.html中包含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

來源

2017-05-10 08:03:28

m3u8文件沒有播放，當視頻src在videojs中動態變化時

回答

相關問題