Having an issue with accessing values and methods in the videojs plugin within my Angular project. When the component initializes, the values are showing as undefined. I've tried calling the videojs method in ngAfterViewInit as well, but still not getting the component values to show up in the videojs method. Any ideas on how to display variable values in the videojs method? Can anyone provide some assistance?
Below is the 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();
}
});
}
Here is the play-video.component.html content:
<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>