Question

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

标记仅在网址存在时显示。

触发视频标记normamenel，但不执行css。我正在使用video-js进行视频标记。

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

模板

\n

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

videojs无法在角度2应用程序中工作

1 个答案: