angular - 在 angular2 上设置 video.js

Question

我正在使用 video.js 处理我的 angular2 视频，但无法使其正常工作。 我在我的索引文件中使用 video.js CDN。

<link href="https://vjs.zencdn.net/5.11/video-js.min.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/5.11/video.min.js"></script>

我有一个模板文件

<video *ngIf="videoUrl" id="{{id}}"
  class="video-js vjs-big-play-centered"
  controls
  preload="auto"
>
  <source src="{{listing.url}}" type="video/mp4">
</video>

在 ngAfterViewInit 中包含 video.js 代码的组件

export class ListingComponent implements AfterViewInit, OnInit, OnDestroy {

id: string;

  ngAfterViewInit() {
    videojs(document.getElementById(this.id), {}, function() {
      // Player (this) is initialized and ready.

    });
  }

}

问题是，它显示错误:“找不到名称‘videojs’。”在 ngAfterViewInit

里面

我还尝试通过 npm 安装 video.js 和 import {videojs} from 'video.js 但这也没有用。

有人请帮助我如何使 video.js 与 angular2 一起工作。提前致谢

Answer 1

首先，您没有初始化 videojs。所以它显示 videojs 未定义。

只需在下面找到这段代码:

declare var videojs: any;

export class ListingComponent implements AfterViewInit, OnInit, OnDestroy {

  id: string;
  private videoJSplayer: any;

  constructor() {}

  ngAfterViewInit() {
    this.videoJSplayer = videojs(document.getElementById('video_player_id'), {}, function() {
      this.play();
    });
  }

  ngOnDestroy() {
    this.videoJSplayer.dispose();
  }
}

html:

 <video 
   *ngIf="videoUrl" 
   id="video_player_id"
   class="video-js vjs-big-play-centered"
   controls 
   preload="auto">
   <source src="{{listing.url}}" type="video/mp4">
 </video> 

检查此链接:videojs plunker plunker with answered