如何为angular2导入视频js？答案

【问题标题】：How to import video js for angular2?如何为angular2导入视频js？
【发布时间】：2018-01-13 18:30:33
【问题描述】：

我尝试使用视频 js 播放器构建一个 angular2 应用程序，但我不知道如何调用。我在 example.compontent.html 上尝试没有工作，并在 example.component.ts 上尝试

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

【问题讨论】：

你能说得更具体点吗？你的意思是你不知道怎么打电话？当你这样它不起作用时，你是什么意思？能否也添加example.component.html 代码？

标签： javascript html angular video.js

【解决方案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'));

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

【讨论】：

很好的答案，但最好使用@ViewChild 而不是直接调用getElementById
@user184994 完全同意。这绝对是 Angular-ish。
plunkr 现在好像坏了。

【解决方案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'
        });

      }

 }

【讨论】：

谢谢 - 这工作。我以前从未见过packagename.default 像这样使用过。我们必须这样做的原因是什么？他们只是没有进行默认导出吗？