Angular 6 中使用 Video.js

Question

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

- Nevermind23

---

嗨@Paranoid，你能否在你的项目中集成videojs？我在集成videojs-record插件时遇到了类似的问题。 - CuriousMind

Answer 1

首先，通过npm安装 videojs

npm --install video.js --save

在 angular.json 中添加 videojs 样式和 js。

在 styles 下面添加：

"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

祝你好运！

- Nour

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/

- Chellappan வ

---

import videojs from '@types/video.js'; 提示考虑导入 'video.js' 而非 '@types/video.js'。import videojs from 'video.js'; 无法解析 'video.js'。 - Nevermind23

你是否在 angular-cli.json 文件中添加了 video.js 的路径？ - Chellappan வ

错误 引用错误：videojs未定义。 - HD..

Answer 3

实现代码 链接

当前时间的代码

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

- Paul Cheriyan

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>

记得将 "path to video" 更改为你的视频路径。

另外，在你的 app.module.ts 文件中，确保将该组件导入为声明和 entryComponent，以便可以在其他组件中注入。

我想要明确一点，这不是我的原始代码，这个教程来自于 videojs 的网站。链接在这里：https://docs.videojs.com/tutorial-angular.html

- Darrow Hartman

---

它的工作正常，但当我在手机上播放视频时，视频会滚动到上方。只有一半的视频在视图内。 - Najam Us Saqib