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 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 应用程序中安装 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.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;

在您的方法或网络钩子方法中添加以下代码

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

4 个答案: