在 angular2 上设置 video.js [英] Setup video.js on angular2

问题描述

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

I am using video.js to work on my angular2 vidoes but couldn't make it work. I am using video.js CDN in my index file.

<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 代码的组件

And component with video.js code inside 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

The problem is, it shows error : "Cannot find name 'videojs'." that is inside ngAfterViewInit

我也尝试通过 npm 安装 video.js 和 import {videojs} from 'video.js 但这也不起作用.

I also tried installing video.js via npm and import {videojs} from 'video.js but that didn't work either.

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

Someone please help me out how to make video.js work with angular2. Thanks in advance

推荐答案

首先你没有初始化 videojs.所以它显示 videojs 未定义.

First your are not initializing the videojs. So its showing the videojs undefined.

只需找到以下代码:

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

这篇关于在 angular2 上设置 video.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！