带Angular 6的Video.js

Question

我想在我的angular 6应用程序中实现Video.js，捕捉当前的播放时间和视频持续时间，找到@types/video.js库，但不确定如何正确使用它，有什么建议吗？

Answer 1

首先，通过npm安装videojs

npm --install video.js --save

向angular.json添加videojs样式，js

在样式下：

"node_modules/video.js/dist/video-js.min.css"

在脚本下：

"node_modules/video.js/dist/video.min.js"

添加html标签

<video id="video-player" preload="metadata" class="video-js vjs-default-skin"></video>

然后在组件中初始化videojs播放器，如下所示

首先在所需的组件中声明videojs

declare var videojs : any ;

并在组件本身中声明播放器的变量和动态链接

player: any ;

videoLink : string : 'Your-video-Link' ;

在ngAfterViewInit中添加以下代码

*不是在OnInit中！

this.player = videojs(document.getElementById('video-player'), {
      sources: {
        src: videoLink,
        type: "video/mp4"
      },
 }, function onPlayerReady() {

// Here where the magic happens :D 

this.on('loadedmetadata', () => {
   
      });
this.on('timeupdate', () => {
   
      });
this.on('loadeddata', () => {
   
      });
})

查看API官方文档，了解有关您可能要监控/使用的事件的更多信息

https://docs.videojs.com/docs/api/player.html

祝你好运！

Answer 2

模板代码

<video *ngIf="url" id="video_{{idx}}"
     class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"
     controls preload="auto"  width="640" height="264">

    <source [src]="url" type="video/mp4" />

  </video>

有关更多信息，请查看以下内容：https://www.arroyolabs.com/2017/03/angular-2-videojs-component/

Answer 3

实现代码link

当前时间的代码

 myPlayer.on('timeupdate', function() {
var currentTime = this.currentTime();
checkPopup(currentTime)});