如何在AngularJS中设置Video.js？

---

Video.js是一个现代的网页视频播放器，用于创建不同视频播放格式的视频播放器。它支持所有现代视频格式，如Youtube、Vimeo、Flash等，以及所有标准视频播放格式，如mp4、webm、flv等。

Video.js可以与各种流行的框架集成，如React、Angular等。在本文中，我们将专门学习如何在AngularJS中设置Video.js。我们将使用AngularJS创建一个Video.js组件，然后在我们的项目中使用它。

如何在AngularJS中设置Video.js？

为了在AngularJS中使用Video.js，我们需要为Video.js创建一个Angular组件，该组件将返回一个带有“video-js”类和其他一些视频属性的<video>元素模板。

创建组件后，我们将使用组件选择器在项目的其他部分使用此组件。

现在，让我们开始创建Video.js的AngularJS组件。

首先，我们将导入Video.js以及AngularJS组件的一些前提条件，然后我们将添加要创建的组件的详细信息。

示例

请考虑以下代码片段。

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

@Component({
   selector: 'vjs-player',
template: `
   <video #target class="video-js" controls muted playsinline preload="none"></video>
`,
   styleUrls: [
      './vjs-player.component.css'
   ],
encapsulation: ViewEncapsulation.None,
})

在上面的代码片段中，我们首先导入了Angular组件的一些前提条件，然后导入了Video.js。

导入Video.js后，组件的详细信息已被定义。此组件的选择器名为“vjs-player”。在template属性中，我们返回带有“video-js”类的video元素以及一些标准的视频属性，如controls、preload等。在styleUrls属性中，定义了组件的CSS。请确保更新CSS文件的路径。最后，我们将此组件的视图封装设置为none，这意味着应用于此组件的所有样式都是全局应用的。

既然我们已经导入了所需的函数并定义了我们的组件，让我们继续实际实现组件。

示例

请考虑以下代码，实现我们Video.js组件的方法和函数。

// creating the videojs player component
export class VjsPlayerComponent implements OnInit, OnDestroy {
   @ViewChild('target', {static: true}) target: ElementRef;
   
   // Setting the video js options
   // which we need to use
   @Input() options: {
      fluid: boolean,
      aspectRatio: string,
      autoplay: boolean,
      sources: {
         src: string,
         type: string,
      }[],
   };
   player: videojs.Player;
   constructor(
      private elementRef: ElementRef,
   ) {}
   
   // Initializing a video player on component initialization 
   ngOnInit() {
      this.player = videojs(this.target.nativeElement, this.options,
   function onPlayerReady() {
      console.log('video Player on Ready', this);
   });
}
// Destroying the player on component destruction
   ngOnDestroy() {
      if (this.player) {
         this.player.dispose();
      }
   }
}

在上面的代码中，我们首先创建了一个类“VjsPlayerComponent”，它实现了ngOnInit和ngOnDestroy方法。在类中，我们将target设置为我们的元素引用。

就在下面，我们为视频播放器选项设置了输入参数，这些参数正好包含四个参数：fluid、controls、autoplay和sources作为视频选项。如果您需要更多视频选项，则必须在此处定义它们，否则它们将不起作用。

定义视频选项后，我们实现了构造函数、**ngOnInit**和**ngOnDestroy**方法。ngOnInit方法在组件初始化时初始化我们的视频播放器，并在控制台中记录字符串“video Player on Ready”。类似地，ngOnDestroy方法在组件销毁时释放视频播放器。

既然我们已经了解了Video.js组件的各个方面，最终代码将如下所示。

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

@Component({
   selector: 'vjs-player',
   template: `
      <video #target class="video-js" controls muted playsinline preload="none"></video>
`,
   styleUrls: [
      './vjs-player.component.css'
   ],
encapsulation: ViewEncapsulation.None,
})

// creating the videojs player component
export class VjsPlayerComponent implements OnInit, OnDestroy {
   @ViewChild('target', {static: true}) target: ElementRef;
   
   // Setting the video js options
   // which we need to use
   @Input() options: {
      fluid: boolean,
      aspectRatio: string,
      autoplay: boolean,
      sources: {
         src: string,
         type: string,
      }[],
   };
   player: videojs.Player;
   constructor(
      private elementRef: ElementRef,
   ) {}
   
   // Initializing a video player on component initialization
   ngOnInit() {
      this.player = videojs(this.target.nativeElement, this.options,
      function onPlayerReady() {
         console.log('video Player on Ready', this);
      });
   }
   
   // Destroying the player on component destruction
   ngOnDestroy() {
      if (this.player) {
         this.player.dispose();
      }
   }
}

这样，我们就创建了用于创建视频播放器的Angular.js组件。现在，我们只需要导入此组件并使用它来在我们的项目中创建视频播放器。

请考虑以下代码来使用我们创建的Video.js组件：

<vjs-player
   [options]="{
      autoplay: true,
      controls: true,
      sources: [
         { src: 'https://tutorialspoint.com/videos//video.mp4', type: 'video/mp4' }
      ]}"
>
</vjs-player>

在上面的代码中，我们使用在组件详细信息中添加的组件选择器来创建一个视频播放器。然后，我们为播放器传递了一些视频选项，如autoplay、control和sources。在sources数组中，我们添加了视频文件的路径和MIME类型。我们也可以在sources数组中包含多个视频文件。

我们只能使用autoplay、controls、fluid和sources作为视频选项。要使用其他视频选项，我们需要在组件实现中将它们定义为输入参数。

现在，当我们在项目中执行上述代码时，将创建一个视频播放器，该播放器将播放我们的视频文件，并且还将显示视频控件。

注意 - 为了使上述代码正常工作，请分别将组件中的视频文件和CSS文件的路径更改为您的文件。

结论

在本教程中，我们通过一个示例了解了如何使用Angular.js设置Video.js。首先，我们创建一个组件并实现其功能，以便在组件初始化时创建视频播放器，并在组件销毁时销毁它。之后，我们使用Video.js组件来创建一个视频播放器。