angular2中如何访问VideoJs函数中的成员变量和方法？

Question

我在 angular 项目中使用 videojs 插件。我正在尝试访问 videojs 方法中的值和方法，但它在组件初始化时显示未定义的值。我也尝试在 ngAfterViewInit 中调用 videojs 方法，但它仍然没有显示 videojs 中组件的值 method.how 我可以在 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();
          }
    }
  }

播放-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>

Answer 1

您必须使用 ES6 arrow functions 进行回调才能在回调中获得正确的 this 上下文。当您使用 function() {} 语法时，内部的 this 将根据调用上下文而有所不同：

this.videoJSplayer = videojs(document.getElementById('play_video_id'), {}, () => { 
          // `this` will point to the current `PlayVideoComponent` instance
     }
)

angular2中如何访问VideoJs函数中的成员变量和方法？

How to access the member variables and methods in VideoJs function in angular 2?

javascript

video.js

typescript

angular