iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 26
0

今天到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',播放器設置,回呼函式);
參數 描述
播放器NodeID 字串或變數,對應<video>上的id 將建立的videojs物件與播放器綁定用
播放器設置 物件 可不傳此參數。此參數為播放器設定,對應data-setup 帶入的設定
回呼函式 函式 可不傳此參數。建立完Videojs物件後執行的函式

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

屬性 描述
sources 字串、物件或陣列 影片連結
autoplay 布林值 是否自動播放
loop 布林值 是否循環播放
controls 布林值 是否顯示控制條
muted 布林值 是否靜音
width 數值 寬度(單位為px)
height 數值 高度(單位為px)

這裡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("播放影片")
})

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

事件名 描述
ready 播放器物件建立、準備好時觸發
playing 播放時觸發
seeked 時間軸拖曳更新觸發
pause 暫停時觸發
ended 播放結束觸發
error 錯誤時觸發
fullscreenchange 進入、退出全螢幕觸發
volumechange 音量改變時觸發

 

方法 Methods

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

參考

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


上一篇
Day25 react-player
下一篇
Day27 Video.js + React 播放器整合
系列文
前端影片與直播筆記30

尚未有邦友留言

立即登入留言