2017-05-30 33 views
0

我在我的角度項目中使用videojs插件。我試圖訪問videojs方法中的值和方法,但是它在組件初始化時顯示未定義的值。我試圖調用ngAfterViewInit中的videojs方法,但它仍然沒有顯示videojs方法中的組件值。我可以在videojs方法中顯示變量值嗎?誰能幫我?如何訪問角2中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> 

回答

1

你必須使用ES6 arrow functions回調,讓您的回調中正確this上下文。當您使用function() {}語法this內將基於調用上下文:

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

感謝Saravana,我跟着箭頭的功能,現在我能夠訪問這些值! –

相關問題