CODEWITHSUNDEEP
javascripthtmlangularvideo.js
Akos. prestigio
Akos. prestigio

Reputation: 37

How to import video js for angular2?

I try to build an angular2 application with video js player but i don't know how to call. I try on the example.compontent.html like there is not work and try in example.component.ts like

var videojs=require('video.js');
var player = videojs('my-player');

Upvotes: 1

Views: 5255

Answers (2)

Fawad Mukhtar
Fawad Mukhtar

Reputation: 890

Simple steps: 1. npm install --save video.js 2. npm install --save-dev @types/video.js

After installation just import like this. Now we can use interfaces too like this. 

 import * as videojs from 'video.js'

 class VideoComponent {
     public videoJS = videojs.default
     private videoPlayer: videojs.VideoJsPlayer
     private options: videojs.VideoJsPlayerOptions

     someMethod() {
        this.videoJS('my-player', {
          controls: true,
          autoplay: true,
          preload: 'auto'
        });

      }

 }

Upvotes: 3

Amit Beckenstein
Amit Beckenstein

Reputation: 1332

Angular 2+ is written in TypeScript, therefore you'll need TypeScript definitions for VideoJS to be able to use the library's API properly in Angular 2. To do so, install @types/videojs via npm:

npm install @types/videojs

Now you can import VideoJS using the import statement. Also, take notice that writing pure-JS is still possible in TypeScript.

Anyway, what you're trying to achieve would probably not work because your component's template and logic are separated until bundling, unlike in VideoJS's example where the script is located inside of the HTML template. Therefore you'll need to pass the element itself using document.getElementById.

videojs(document.getElementById('my-player'));

I suggest you to refer to this example of a VideoJS Angular 2 component.

Upvotes: 3

Related Questions