在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>

以及内部带有video.js代码的组件 ngAfterViewInit

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与回答