角度プロジェクトで videojs プラグインを使用しています。videojs メソッドの値とメソッドにアクセスしようとしていますが、コンポーネントの初期化時に未定義の値が表示されます。ngAfterViewInit でも videojs メソッドを呼び出そうとしましたが、まだ videojs メソッドのコンポーネントの値が表示されていません。videojs メソッドで変数値を表示するにはどうすればよいですか? 誰も私を助けることができますか？
コンポーネントコード:
import {Component,OnInit} from '@angular/core';
declare var videojs :any;
@Component({
selector: 'app-play-video',
templateUrl: './play-video.component.html',
styleUrls : []
})
export class PlayVideoComponent implements OnInit{
public videoJSplayer :any;
public videoUrl :string;
constructor(){
this.videoUrl = 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4';
}
showValues(){
console.log("show Values method called");
}
ngOnInit() {
this.videoJSplayer = videojs(document.getElementById('play_video_id'), {}, function() {
console.log(this.videoUrl); // here the video url value is undefined
this.showValues(); // this also undefined
this.play();
}
}
}
play-video.component.html :
<video id="play_video_id" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source [src] = videoUrl type="video/mp4" />
</video>
コールバック内で正しいコンテキストを取得するには、コールバックにES6アロー関数を使用する必要がありthisます。function() {}構文を使用する場合、this内部は呼び出しコンテキストによって異なります。
this.videoJSplayer = videojs(document.getElementById('play_video_id'), {}, () => {
// `this` will point to the current `PlayVideoComponent` instance
}
)
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加