今天到29天都會以 Video.js 播放器為主

Video.js 是一款開源播放器，它是一個經典的 JS 播放器，從2010至今，中間歷經數次版本迭代，目前已到了第7版，這個播放器的特色是：

1. Github 23053 顆星星
2. Plugin 豐富
3. 可透過 Plugin 支援多種格式、協議影片
4. 可在 HTML5、Flash 間切換
5. 文件齊全到過於瑣碎
6. 不少JS播放器在設計上皆受到 Video.js 啟發

原先 Video.js 要播放 Hls 協議影片，需要特別引入 Video.js 的 Hls Plugin (集合了部分 Hls.js)。

在 Video.js7 中，將 Hls Plugin 置入了Video.js 中，現在使用 Video.js 不用特別引入其他 Library 就可以播放 Hls 協議的影片。

安裝、引入 Video.js

CDN

CSS

<link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet">

JS

<script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>

或者

npm

npm install video.js

快速入門：建立 Video.js 物件

方法1

HTML

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
    <source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4">
</video>

比較需要留意的是 data-setup="{}"， data-setup 可以帶入 Video.js 的播放器參數，這裡我們僅帶入空物件。

還有兩點要注意：

1. 若 <video> 未帶入 data-setup 屬性，這裡將無法建立 Video,js 播放器( 變回原生播放器 )。
2. <video> 的 class 要帶入video-js，否則 video.js 的樣式會跑版。

至此便建立完成

另外，Video.js播放器的初始播放按鈕預設在左上角

若想要讓其置中很簡單，在<video>上多加個 class vjs-big-play-centered 就好，把class改成 class="video-js vjs-big-play-centered" 即可。

方法2

與方法1 相比，一般大家多以方法2，也就是用 JS 來建立 Videojs 播放器物件。

HTML

<video id="my-video" class="video-js vjs-big-play-centered"><video>

JavaScript的部分則要用videojs()建立物件，videojs()一共可以帶入三個參數

videojs('播放器nodeID',播放器設置,回呼函式);

而第二個參數，播放器設置的物件可帶入以下屬性與值 ( 這裡僅列出常用的 )

這裡JS我們寫成這樣：顯示控制UI、自動循環播放、預設靜音、寬600px、高400px的播放器。

const player = videojs('my-video',{
    sources:[{ src: "http://www.html5videoplayer.net/videos/toystory.mp4"}],
    loop:true,
    muted:true,
    width:"600",
    height:"400px",
    controls:true
});

關於播放器設置 options 可見此

事件 Events

事件監聽寫法與先前介紹的其他播放器類似

videojs物件.on("事件名",回呼函式)

例如：

player.on("playing",()=>{
    console.log("播放影片")
})

這裡列出幾個常用的事件名

方法 Methods

因為videojs方法太多了，具體Methods API見此
　
　
　
　
　
　

參考

videojs 官網
videojs github
videojs 官方文件
videojs 官方文件 api