我使用的组件具有通过订阅执行视频 URL 的功能。
只有当url存在时才会显示该标签。
video标签被正常触发，但是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>
最佳答案
记得添加:
<link href="http://vjs.zencdn.net/6.2.8/video-js.css" rel="stylesheet">
致您的<head></head> index.html 中的部分
还将 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 的使用有关库。
关于angular - videojs 无法在 Angular 2 应用程序中工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47023487/