本篇要解決的問題
話說不知道為什麼，每過一陣子就會聽到要用影音播放器的需求，不管是在目前的公司，還是在之前的公司都會聽到，與其真正有需求來時才來研究，不如趁著這個周末先來瞧瞧。
這篇是使用 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 的 controls、preload 等標籤，也可以寫在這，但因為這段範例程式碼用的是原生的標籤，所以 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
