Video.js 与 Angular 6

Question

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

Answer 1

首先，安装videojs到npm

npm --install video.js --save

添加videojs样式，js到angular.json

在样式下：

"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)});

Answer 4

这是一个实际可行的答案

我尝试了其他一些解决方案，它们似乎都错了。 Video.js 在他们的网站上有一个 angular 示例。

首先初始化一个组件（如果您安装了 angular cli，此命令有效）：ng g c videojs

然后这个 npm 命令：npm install --save-dev video.js

然后在videojs ts文件里面添加这段代码：

// videojs.ts component
import { Component, ElementRef, Input, OnDestroy, 
OnInit, ViewChild, ViewEncapsulation } from 
'@angular/core';
import videojs from 'video.js';

@Component({
  selector: 'app-videojs',
  templateUrl: './videojs.component.html',
  styleUrls: ['./videojs.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class VjsPlayerComponent implements OnInit, 
OnDestroy {
  @ViewChild('target', {static: true}) target: 
ElementRef;
  // see options: 
https://github.com/videojs/video.js/blob/maintutorial- 
 options.html
  @Input() options: {
      fluid: boolean,
      aspectRatio: string,
      autoplay: boolean,
      sources: {
          src: string,
          type: string,
      }[],
  };
  player: videojs.Player;

  constructor(
    private elementRef: ElementRef,
  ) { }

  ngOnInit() {
    // instantiate Video.js
    this.player = videojs(this.target.nativeElement, 
this.options, function onPlayerReady() {
      console.log('onPlayerReady', this);
    });
  }

  ngOnDestroy() {
    // destroy player
    if (this.player) {
      this.player.dispose();
    }
  }
}

在您的 HTML 文件中添加以下内容：

    <video #target class="video-js" controls muted playsinline preload="none"></video>

然后将这个添加到 css 中：

@import '~video.js/dist/video-js.css';

最后你可以将这个组件注入到任何你想要的地方：

  <app-videojs [options]="{ autoplay: true, controls:true, sources: [{ src: 'path to video', type: 'video/mp4' }]}"></app-videojs>

记得将“视频路径”更改为视频路径。

此外，在您的 app.module.ts 文件中，确保您已将组件作为声明和 entryComponent 导入，以便可以将其注入到其他组件中。

我想澄清一下，这不是我的原始代码，本教程来自 videojs 的网站。链接在这里：https://docs.videojs.com/tutorial-angular.html