在video.js上安装angular2

Question

我正在使用video.js在我的angular2 vidoes上工作，但无法使它工作。我在索引文件中使用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和import {videojs} from 'video.js安装video.js，但这也不起作用。

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

Answer 1

首先，您没有初始化视频the。所以它显示的视频So没有定义。

只需在下面的代码中找到：

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> 

检查此链接：视频柱塞 有答案的柱塞

Answer 2

由于2+通过向组件下的每个元素添加_ng-content-c*属性并向样式添加相同的属性来使用ViewEncapsulation，因此需要禁用此特性来集成第三方库(如VideoJS )。

您的组件定义应该如下所示：

@Component({
  selector: 'app-player',
  templateUrl: 'component.html',
  styleUrls: [
    'component.scss',
    '../../../node_modules/video.js/src/css/video-js.scss',
  ],
  encapsulation: ViewEncapsulation.None, // This plus the sytleUrl are the important parts
})
export class PlayerComponent implements OnInit, AfterViewInit {
}

Answer 3

在使用角4+和角CLI时，我发现最好的解决方案是通过npm包安装，然后将视频in添加到angular-cli.json中的脚本中，如下所示：

"scripts": [
    "../node_modules/video.js/dist/video.min.js"
]

然后，将其添加到您的typings.d.ts中。

declare const videojs: any;

然后按照正常的方式输入：

ngAfterViewInit() {
  this._videoPlayer = videojs(document.getElementById('video'), {}, () => {});
}