videojs 在 Angular 2 应用程序中不起作用

【问题标题】：videojs not working in angular 2 appvideojs 在 Angular 2 应用程序中不起作用
【发布时间】：2017-10-30 20:15:29
【问题描述】：

我使用的组件具有通过订阅执行视频 url 的功能。

标签只有在url存在时才会显示。

video 标签被触发 normamenel，但是 css 没有被执行。我正在使用 video-js 到视频标签。

this.postServices.getPost(id).subscribe( (res) => {

this.video = 'http://127.0.0.1:9111/api/get/video.mp4';

})

模板

<video *ngIf="video"
                 class="video-js"
                 controls preload="metadata" autoplay="true" >
              <source [src]="video" type="video/mp4" />
          </video>

【问题讨论】：

如果添加了视频元素，则与*ngIf无关
那么，元素显示出来了，但是css样式没有到位？
正是阿门。 CSS video-js 不显示。
Gunter - 它与 if 无关，但必须与加载有关，因为组件中未显示 video-js css。
标签被执行，但播放器风格不显示。

标签： angular video.js

【解决方案1】：

记得添加：

<link href="http://vjs.zencdn.net/6.2.8/video-js.css" rel="stylesheet">

到 index.html 中的 <head></head> 部分

还将 videojs 脚本添加到您的 index.html：

<script src="http://vjs.zencdn.net/6.2.8/video.js"></script>

然后，当您在服务中运行对 url 的请求时，您应该初始化播放器：

declare let videojs: any; // just to avoid TS stuffs for this demo
player: any;

this.postServices.getPost(id).subscribe( (res) => {
    this.video = 'http://127.0.0.1:9111/api/get/video.mp4';
    // Just to be sure that you have the video tag available
    setTimeout(() => player = videojs('player'), 100);
})

模板：

      <video *ngIf="video" id="player"
             class="video-js"
             controls preload="metadata" autoplay="true" >
          <source [src]="video" type="video/mp4" />
      </video>

这应该可以工作，但这不是*ngIf 的问题，它与videojs 库的使用有关。

【讨论】：