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

    });
  }

}

问题是，它显示错误："Cannot find name 'videojs'." 位于 ngAfterViewInit

内

我也尝试通过 npm 和 import {videojs} from 'video.js 安装 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>

检查此 link：videojs plunker plunker with answered

Answer 2

由于Angular 2+使用ViewEncapsulation，通过给组件下的每个元素添加一个_ng-content-c*属性，并为样式添加相同的属性，你需要禁用这个功能来集成第三方库，例如 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

当与 Angular 4+ 和 Angular CLI 一起使用时，我发现最好的解决方案是通过 npm 包安装，然后将 videojs 添加到 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'), {}, () => {});
}

Answer 4

在您的 Angular 应用程序中安装 vide0.js 之后

1.STEP->

粘贴<link href=“//vjs.zencdn.net/5.11/video-js.min.css” rel=“stylesheet”>。在 index.html

2.Step

将此添加到您的 component.html

<video id=“video” class=“video-js” controls  >
                 </video>

3.STEP

Add this in your component.css

@import ‘~video.js/dist/video-js.css’;
.video-js {
    width: 100%;
    height: 250px;;
  }

4.Step-> 在你的 Component.ts

import videojs from “video.js”; 


url:String=” “; //initialize this with video url
  player: videojs.Player;

在您的方法或 webhook 方法中添加以下代码

this.url = "assign video url";
           
            this.player = videojs(“video”, {
              controls: true,
              autoplay: false,
              muted: false,
              html5: {
                hls: {
                  overrideNative: true
                }
              }
            });
            this.player.src({
              src: this.url,
              type: “application/x-mpegURL”
            });
            this.player.on(“play”, () => {
              this.player.controls(true);//for controls make it true for other make it false
            });
            this.handleVideoAutoplay();

//you can use this method or ignore as well depend upon you
private handleVideoAutoplay() {
    const playButton = this.player.getChild(“bigPlayButton”);
    if (playButton) {
    //  playButton.hide();
      this.player.ready(() => {
        let promise = this.player.play();
        if (promise === undefined) {
          playButton.show();
          this.player.on(“play”, () => {
           // this.player.muted(false);
          });
        } else {
          promise.then(
            () => {
              playButton.show();
            },
            () => {
              playButton.show();
            }
          );
        }
      });
    }
  }

在 angular2 上设置 video.js

Setup video.js on angular2

video.js

angular