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

查看此链接：videojs plunkerplunker 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 应用中安装 video0.js 后

1.STEP->

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

2.步骤

在你的 component.html 中添加这个

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

3.步骤

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();
            }
          );
        }
      });
    }
  }