Issue
I am using video.js to work on my angular2 vidoes but couldn’t make it work.
I am using video.js CDN in my index file.
<link href="https://vjs.zencdn.net/5.11/video-js.min.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/5.11/video.min.js"></script>
I have a template file
<video *ngIf="videoUrl" id="{{id}}"
class="video-js vjs-big-play-centered"
controls
preload="auto"
>
<source src="{{listing.url}}" type="video/mp4">
</video>
And component with video.js code inside ngAfterViewInit
export class ListingComponent implements AfterViewInit, OnInit, OnDestroy {
id: string;
ngAfterViewInit() {
videojs(document.getElementById(this.id), {}, function() {
// Player (this) is initialized and ready.
});
}
}
The problem is, it shows error : “Cannot find name ‘videojs’.” that is inside ngAfterViewInit
I also tried installing video.js via npm and import {videojs} from 'video.js
but that didn’t work either.
Someone please help me out how to make video.js work with angular2. Thanks in advance
Solution
First your are not initializing the videojs. So its showing the videojs undefined.
just find this below code:
declare var videojs: any;
export class ListingComponent implements AfterViewInit, OnInit, OnDestroy {
id: string;
private videoJSplayer: any;
constructor() {}
ngAfterViewInit() {
this.videoJSplayer = videojs(document.getElementById('video_player_id'), {}, function() {
this.play();
});
}
ngOnDestroy() {
this.videoJSplayer.dispose();
}
}
html:
<video
*ngIf="videoUrl"
id="video_player_id"
class="video-js vjs-big-play-centered"
controls
preload="auto">
<source src="{{listing.url}}" type="video/mp4">
</video>
check this link: videojs plunker plunker with answered