videojs 在 angular 2 个应用程序中不工作

Question

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

标签仅在 url 存在时显示。

视频标签被 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>

Answer 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 库的使用有关。

videojs 在 angular 2 个应用程序中不工作

videojs not working in angular 2 app

video.js

angular