javascript - How to import video js for angular2? - Stack Overflow

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

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

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

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

• javascript
• html
• angular
• video.js

Share Follow asked Jan 13, 2018 at 18:30 Akos. prestigioAkos. prestigio 3711 silver badge99 bronze badges 1

• Can you be more specific? What do you mean you don't know how to call? What do you mean when you so it does not work? Can you add the example.ponent.html code as well please? – user184994 Commented Jan 13, 2018 at 18:38

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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 ponent'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 ponent.

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'
        });

      }

 }