如何在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.tw/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元件來建立一個影片播放器。