Video.js 使用筆記:中文介面、取值、事件、改樣式

/

本篇要解決的問題

話說不知道為什麼,每過一陣子就會聽到要用影音播放器的需求,不管是在目前的公司,還是在之前的公司都會聽到,與其真正有需求來時才來研究,不如趁著這個周末先來瞧瞧。

這篇是使用 Video.js 的部份,原本是要用三個播放器的套件,但這個周末梅雨季,陰雨綿綿的讓人好想睡,才把 Video.js 的範例給完成就覺得可以了,另外二種播放器就交給未來的自己吧(拍肩)。

本篇使用 Video.js 的部份,是 August 在實務上會用到的一些需求:介面改中文、取出影片長度、取出當下播放到的秒數、監聽播放事件、監聽暫停事件、客製播放器樣式。

Video.js 的文件實在是落落長,就取幾個當作範例,想看更多功能就請自行觀看 官方文件 啦~

本篇製作的範例頁在這:Demo


建立影片播放器

第一步最簡單的,就是用 Video.js 來建立一個影片的播放器。

引用 CSS、JS

CSS、JS 的 CDN 路徑各自如下:

<link href="https://vjs.zencdn.net/7.18.1/video-js.css" rel="stylesheet" />
<!-- HTML 部份 -->
<script src="https://vjs.zencdn.net/7.18.1/video.min.js"></script>

官方文件上也有用 npm 來安裝的說明:

npm install --save-dev video.js

HTML

在要放入影片的地方,寫下 HTML 程式碼:

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

<video id="video-js" class="video-js vjs-fluid" data-setup="{}"
       controls="controls" preload="auto"
       controlsList="nodownload">
  <source src="影片路徑.mp4" type="video/mp4"/>
  <source src="影片路徑.webm" type="video/webm" />
  <p class="vjs-no-js">您的瀏覽器不支援 Javascript</p>
</video>

id:必填。之後取影片長度或是監聽事件時,在命名 player 變數時會要填寫播放器的 ID。

data-setup:必填。Video.js 會找 data-setup 來執行程式,video 的 controlspreload 等標籤,也可以寫在這,但因為這段範例程式碼用的是原生的標籤,所以 data-setup 就寫空物件。文件有特別說明這邊要用雙引號 "{}",因為裡面包的是物件。

controlsList nodownload:隱藏播放器上的下載影片按鈕。


使用中文介面

其實,覺得 Video.js 的文件不太好懂,比較是寫給對 Video.js 很熟的人看的字典工具,替換語系的說明文件在這:Languages

以下是 August 研究出來的使用中文介面方式。

先到 Video.js 的 GitHub 上下載要的語系 JSON 檔:GitHub,我們用的是繁體中文,就下載 zh-TW.json

下載好檔案,放進我們的專案資料夾後,接著就是程式碼的部份:

import videoTW from '../dist/zh-TW.json'; // import 中文語系
videojs.addLanguage('zh-TW', videoTW); // 命名中文語系為「zh-TW」
const player = videojs('video-js', {
  language: 'zh-TW' // 設定使用語系為 zh-TW
});

如果不用 import 的,也可以複製下載的 JSON 裡的值,直接貼上:

videojs.addLanguage('zh-TW', {
  "Play": "播放",
  "Pause": "暫停",
  "Current Time": "目前時間",
  // ...
}); // 命名中文語系為「zh-TW」
const player = videojs('video-js', {
  language: 'zh-TW' // 設定使用語系為 zh-TW
});

取值:影片總長度、當下秒數

首先,就像上面改用中文介面時有寫的,我們要先把播放器命成變數 player

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

const player = videojs('video-js', {
  language: 'zh-TW' // 設定使用語系為 zh-TW
});

接著不論是取值,或是監聽事件,都直接拿 player 這個變數來使用就行。

// 取影片總長度(單位:秒)
const duration = player.duration(); // => 如:39.873167
// 取當下秒數
let current = player.currentTime(); // => 如:5.419689

監聽事件:播放、暫停

之所以需要監聽事件,是因為實務上常常會有行銷企劃人員想要知道每個觀看者做了哪些事情,比放進到頁面的人有多少,實際有按下影片播放的人又有多少?

這邊 August 示範監聽播放、暫停這二個基本的事件,文件上有更多事件可以監聽,想知道更多的朋友們就請自行看 官方文件 囉。

// 命名 player 變數
const player = videojs('video-js');
// 播放事件
player.on('play', (event) => {
  // 影片播放時要做的事
});
// 暫停事件
player.on('pause', (event) => {
  // 影片暫停時要做的事
});

改變播放器樣式

除了預設樣式,Video.js 還有提供四種不同風格的樣式:City、Fantasy、Forest、Sea。

使用方式很簡單,先引用樣式的 CSS:

<!-- 基本樣式,一定要有 -->
<link rel="stylesheet" href="https://unpkg.com/video.js@7/dist/video-js.min.css"/>
<!-- City -->
<link rel="stylesheet" href="https://unpkg.com/@videojs/themes@1/dist/city/index.css"/>
<!-- Fantasy -->
<link rel="stylesheet" href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css"/>
<!-- Forest -->
<link rel="stylesheet" href="https://unpkg.com/@videojs/themes@1/dist/forest/index.css"/>
<!-- Sea -->
<link rel="stylesheet" href="https://unpkg.com/@videojs/themes@1/dist/sea/index.css"/>

引用好 CSS 後,在 HTML 的部份就加上 vjs-theme-樣式名稱 的 class name 就行:

<video id="video-js" class="video-js vjs-fluid vjs-theme-sea" data-setup="{}">
  <!-- ... -->
</video>

這段範例寫的是 vjs-theme-sea,意思就是要使用 Sea 這個樣式。

如果要用 Forest 樣式,那就是寫 vjs-theme-forest,以此類推。

Video.js 也有提供客製樣式的生成器:Video.js Skin Designer

不過生成器似乎是壞了,後來 August 是複製 Sass 的部份自行調整後才能使用。


範例原始碼

本篇範例的原始碼有放上 GitHub,取用前麻煩點個星星或分享本篇文章,一個小小動作就是對本站大大的鼓勵。

Demo:https://letswritetw.github.io/letswrite-video-js-player/

原始碼:https://github.com/letswritetw/letswrite-video-js-player

Summary
Video.js 使用筆記:中文介面、取值、事件、改樣式
Article Name
Video.js 使用筆記:中文介面、取值、事件、改樣式
Description
本篇大綱:本篇要解決的問題。建立影片播放器、引用 CSS、JS、HTML。使用中文介面。取值:影片總長度、當下秒數。監聽事件:播放、暫停。改變播放器樣式。範例原始碼。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Front-End

TestCafe 學習筆記 – 1:自動化測試會員登入

Bot Telegram

Telegram Bot 學習筆記 – 3:鍵盤 Keyboard

Front-End

Day.js 計算最近7天、上週、上個月的日期

Front-End

JavaScript 載入方式 defer、async

Apps Script Google

Google Apps Script 讀寫 Cloud Firestore 資料

Vue

D3.js、Vue 畫一個台灣地圖

Front-End

IntersectionObserver:上篇 – 基本介紹及使用

Front-End

用 Microsoft Clarity 網站分析工具,觀察使用者行為

Bot Telegram

Telegram Bot 學習筆記 – 2:用 Google Apps Script 接收 / 推播訊息

Analytics Google

Google Analytics 事件追蹤設定

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 August 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 August 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。