如何為angular2導入視頻js？

Question

我嘗試使用視頻js播放器構建angular2應用程序，但我不知道如何調用。 我嘗試在example.compontent.html上嘗試失敗，然后在example.component.ts上嘗試嘗試

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

Answer 1

Angular 2+是用TypeScript編寫的，因此，您需要VideoJS的TypeScript定義才能在Angular 2中正確使用庫的API。為此，請通過npm安裝@ types / videojs：

npm install @types/videojs

現在，您可以使用import語句導入VideoJS。 另外，請注意，仍可以在TypeScript中編寫純JS。

無論如何，您要實現的目標可能無法正常工作，因為在捆綁之前，組件的模板和邏輯是分開的，這與VideoJS的示例（腳本位於HTML模板內部）不同。 因此，您需要使用document.getElementById傳遞元素本身。

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

我建議您參考此VideoJS Angular 2組件示例 。

Answer 2

簡單步驟：1. npm install --save video.js 2. npm install --save-dev @types/video.js

安裝后，只需像這樣導入。 現在我們也可以像這樣使用接口。

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

      }

 }