【學習筆記】Video.js × Angular

紀錄如何使用VideoJS，以及一些比較會用到的操作，跟自己做的實際樣子。

Videojs基本設定

1.安裝

npm install video.js

2.建立一個component

負責videojs的撥放，以便其他元件只需要傳參數給本component就可以依照參數的變化執行對應的動作

ng g c video-player

接著在video-player.ts中將videojs引入

import videojs from 'video.js';

在HTML中建立videojs的標籤(#target方便等等使用ViewChild獲取這個tag)

<video 
    #target 
    class=”video-js” 
    controls   
</video>

在TS中取得名叫target的videojs標籤

@ViewChild('target, {static: true}) target: ElementRef;

宣告一個videojs.Player物件，並將videojs的tag當參數傳入

player: videojs.Player;
this.player = videojs(this.target.nativeElement, this.options, function onPlayerReady() {
    console.log('onPlayerReady', this);
});

這樣就完成基本設定了，來看一下完整的TS程式碼

import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import videojs from 'video.js';
@Component({
    selector: 'app-video-player',
    template: `
      <video 
          #target 
          class=”video-js” 
          controls 
      >
      </video>
    `,
    styleUrls: ['./video-player.component.scss']
})
export class VideoPlayerComponent implements OnInit {
    @ViewChild('target', {static: true}) target: ElementRef;
    @Input() options: {
    fluid: boolean,
    aspectRatio: string,
    autoplay: boolean,
    sources: {
        src: string,
        type: string,
     }[],
    };
    player: videojs.Player;
    constructor( private elementRef: ElementRef,) { }
    ngOnInit(): void {
        this.player = videojs(this.target.nativeElement, this.options, function onPlayerReady() {
        console.log('onPlayerReady', this);
    });
}
ngOnDestroy() {
// destroy player
    if (this.player) {
        this.player.dispose();
    }
  }
}

到目前為止，video-player的component就算建立完成了，接著只要呼叫就能使用了，我們在app.html帶參數給video-player。

3.呼叫並使用

<app-video-player 
    [options]="{
        autoplay: true,  //是否要讓影片自動撥放(選填)
        controls: true,  //是否要顯示控制條(選填)
        sources: [{  //sources必須有值
           src: 'D:/.../檔名.mp4', //影片的路徑 
           type: 'video/mp4'  //影片格式
      }]
    }"
    >
</app-video-player>

4.執行

ng serve -o

執行結果畫面

到這邊完成了影片功能，可以正常撥放，但我們發現控制選項跑版了。

原來是忘記在Style.css中添加videojs的css樣式，趕快補上再執行一次

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

影片內容不方便放出來，所以用白色遮掉了

完成～這時候影片正常撥放，且控制選項也到正常位置了。

進階使用+說明

可以在options陣列中調整你的影片設定，例如是否自動撥放(autoplay)、禁音(mute)、影片預設音量(volumn)、是否符合外框大小(fluid)、是否擋掉雙點擊後放大功能(doubleClick)…等等。

Video.js提供非常多設定跟功能，可以客製化成你要的樣子，不過本文不會把可以設定的參數全部列出來，可以參考官方文檔或這篇。

接著分享一下自己專案的Video.js樣子以及設計方式。

以上的成果針對原本的Video.js做了幾個變動，分別是：

• 蓋上一層mask，當影片pause時將畫面透明度調低，跟撥放形成對比
• 加上一顆自己的撥放按鈕
• 將控制列表隱藏，並改為自己的樣式，如上是只剩時間軸
• 將時間軸的控制由圓形改成長方形
• 長寬大小可隨意變動

長寬設定

在使用剛剛建立的video-player的標籤外面再加一層div，並讓video-player主動去符合外層div的大小

.html

<div class=”movie-player”>
    [options]="{
        autoplay: true,  //是否要讓影片自動撥放(選填)
        controls: true,  //是否要顯示控制條(選填)
        sources: [{  //sources必須有值
           src: 'D:/.../檔名.webm', //影片的路徑 
           type: 'video/mp4'  //影片格式
      }]}"
    >
</div>

.css

.movie-player{
    width: 43.05555vw;
    height: 43.125vh;
    border: solid #000000 1px;
}

記得在options陣列中加上fluid的屬性，這樣影片才會符合外層大小

<div class=”movie-player”>
   [options]="{
        fluid: true,
        ...
    }">
</div>

如何加上一個撥放按鈕？

將<video>跟<img>都放進同一個CSS的wrap裡，並把img的z-index設的比video高，最後將img置中就可以，CSS大概長這樣。

<div class=”wrap”>
    <video 
        #target
        class=”video-js” 
        controls
    >
    </video> 
    <img 
        class=”player-icon” 
        src=”.../btn-play.png” 
       (click)=”playOnClick()”
    >
</div>

不過這樣會有一個小問題是：只有點到按鈕才會觸發playOnClick()的function，正常來說應該是只要點螢幕範圍就要觸發暫停或撥放，因此我會在加上一層div，加大監聽onClick的範圍。

<div class=”wrap”>
    <video 
        #target
        class=”video-js” 
        controls muted
    >
    </video>
   <img 
        class=”player-icon” 
        src=”.../btn-play.png” 
       (click)=”playOnClick()”
    >
    <img 
        class="click-area" 
        src=".../wbg.png"
       (click)="playOnClick()"  
    >
</div>

CSS

.wrap{
    position: relative;
    width: 100%;
    height: 100%;
    .video-js{
       z-index: 1;
    }
    .player-icon{
       z-index: 2;
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
       width: 3.3333vw;
       height: 3.3333vw;
       margin: auto;
     }
     .click-area{
         opacity: 0.01;
         z-index: 2;
         position: absolute;
         bottom: 0;
         left: 0; 
         width: 100%;
         height: 85%;
     }
}

如何客製化自己的video.js？

我自己的作法是先決定最後目標的樣子，先考慮是否能用video.js給的方法完成，例如可否先隱藏全部control再自己加想要的。

但基本都是要自己刻，因此我做法是F12打開網頁檢查之後ctrl+shift+c，去摸要改變的物件，先看看叫什麼名字，例如：

這樣就知道了該物件在video.js的名字是叫vjs-play-progress，這樣就可以針對那個物件去更改他的樣式。

更改的方式就是在style.scss針對那個class做修正，像是

.vjs-slider,.vjs-load-progress{
    background: #ffffff;
}

有時候遇到屬性吃不進去，可能是有其他上層的屬性去疊到，建議可以網上找，如果真的不行就加上important直接蓋過去。

.vjs-slider,.vjs-load-progress{
    background: #ffffff !important;
}

這樣就可以把video.js的樣式客製成自己想要的樣子了。