如何为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 中正确使用库的 API 2. 为此, 通过 npm:

安装@types/videojs

npm install @types/videojs

现在您可以使用 import 语句导入 VideoJS。另外，请注意，在 TypeScript 中仍然可以编写纯 JS。

无论如何，您尝试实现的目标可能无法实现，因为您的组件的模板和逻辑在捆绑之前是分开的，这与 VideoJS 的示例不同，脚本位于 HTML 模板内。因此，您需要使用 document.getElementById.

传递元素本身

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

建议参考this example of a VideoJS Angular 2 component。

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

      }

 }

如何为angular2导入视频js？

How to import video js for angular2?

html

javascript

video.js

angular