ビデオsrcが動的にvideojsで変更されたときにm3u8ファイルが再生されない

Question

私はこの問題についていくつかの方法を試しましたが、見つからなかった、私はcontribj hlsでvideojsを使用しています。

m3u8のファイルで、私はvideo_sを初めて呼び出すとngOnitが動作しますが、動的なsrc urlを変更するとエラーが表示されます。src urlを変更してビデオjs srcに追加します。サーバーまたはネットワークエラーのためにメディアをロードできませんでした。しかし、私はmp4のMIMEタイプを使用して、うまく動作し、動的なsrcのURLを変更しても動作している場合は、m3u8ファイルでこのhlsを助けることができますか？

これらvideojsファイルを使用して：

<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コードindex.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に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動的