[英]How to access the member variables and methods in VideoJs function in angular 2?
I am using videojs plugin in my angular project. 我在我的有角项目中使用videojs插件。 I am trying to access the values and methods in the videojs method, but its showing the undefined values when the component initialized. 我正在尝试访问videojs方法中的值和方法,但是在初始化组件时它显示了未定义的值。 I tried to call to videojs method in ngAfterViewInit also but its still not showing the values of component in videojs method.how can i show variable values in videojs method? 我也尝试在ngAfterViewInit中调用videojs方法,但是它仍然没有显示videojs方法中的component值。如何在videojs方法中显示变量值? can anyone help me? 谁能帮我?
Component code : 组件代码:
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 : 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>
You have to use ES6 arrow functions for callbacks to get the correct this
context inside your callback. 您必须对回调使用ES6 箭头函数 ,才能在回调中获得正确的this
上下文。 When you use the function() {}
syntax the this
inside will vary based on the calling context: 当您使用function() {}
语法时, this
内部将根据调用上下文而有所不同:
this.videoJSplayer = videojs(document.getElementById('play_video_id'), {}, () => {
// `this` will point to the current `PlayVideoComponent` instance
}
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.