聊一聊在Vue3項目中，如何使用視頻播放器video.js 插件
前言
Video.js是一個通用的在網(wǎng)頁上嵌入視頻播放器的JS庫，比原生video標簽有更強大的功能、更好的兼容性、更美觀等優(yōu)點。是一個比較流行的視頻播放器，它的官網(wǎng)是https://videojs.com/
本篇文章就來看看在vue3項目中如何使用video.js。
安裝使用
首先安裝video.js：
pnpm install video.js --save然后引入css，在mian.js中：
import "video.js/dist/video-js.css";注意：不要遺忘這一步，否則瀏覽器的樣式會有問題。
在頁面中加入video標簽：
<video class="video-js" :id="playerId"></video>class必須是video-js，然后需要設(shè)置一個id。
最后初始化播放器：
import videojs from "video.js";const player = videojs(playerId, {autoplay: true});player.src(url);player.on("ended", () => {//播放完成})
即可播放。
上面只是最簡單的demo，下面來說說video.js中比較常用的功能。
配置
在創(chuàng)建videojs的時候，第一個參數(shù)是對應(yīng)的是播放器元素，可以是id也可以是DOM Element；第二個參數(shù)是options，即播放器的相關(guān)配置。
這里我們說幾個比較常用的，所有配置大家可以參考官網(wǎng)https://videojs.com/guides/options/
aotuplay
自動播放，它有五個選項，可以是boolean也可以是字符串：
false：不自動播放
true：自動播放，但是如果瀏覽器不允許自動播放的話就會失效
“muted”：靜音后自動播放。因為瀏覽器實際上是不允許自動播放聲音，所以靜音后自動播放基本不會失效，但是沒有聲音需要自己處理一下。
“play”：自動播放，與true效果一樣。
“any”：自動播放，如果瀏覽器阻止的話會先靜音再自動播放。
這里大家先了解一下，后面我會詳細說一下自動播放的問題。
src
視頻源
width/height
視頻寬高，number類型
mute
是否靜音
loop
是否循環(huán)播放
playsinline
是否內(nèi)聯(lián)播放。用于移動端（尤其iOS），在部分移動端瀏覽器上如果通過video標簽進行視頻播放，那么瀏覽器會進行劫持并通過一個最上層的播放組件來進行全屏播放。設(shè)置playsinline后會禁止這一行為，在原video標簽內(nèi)進行視頻播放。
不過由于Android系統(tǒng)的碎片化，在部分廠商自帶的瀏覽器上會沒有效果。這個具體看我另外一篇專門講解內(nèi)聯(lián)播放的文章。
controls
是否顯示控制組件（包括控制欄和大播放按鈕等）。如果是true即顯示，同時支持一些用戶操作，比如單擊視頻暫停/播放，雙擊全屏等。如果是false則不顯示，同時也禁止了用戶操作，這樣我們需要自己實現(xiàn)控制。
controlBar
設(shè)置控制欄的內(nèi)容，是一個Object（ControlBarOptions）或者是布爾值。
如果是true則顯示默認控制欄，否則不顯示。
如果是Object則可以對控制欄中的按鈕進行設(shè)置，這里就說說默認顯示的幾個屬性：
playToggle：是否顯示播放按鈕
progressControl：是否顯示進度條。除了boolean，還可以設(shè)置一個ProgressControlOptions對象，更詳細的配置進度條。
volumePanel：是否顯示音量。除了boolean，還可以設(shè)置一個VolumePanelOptions對象，更詳細的配置音量組件。
pictureInPictureToggle：是否顯示畫中畫按鈕
remainingTimeDisplay：是否顯示時長
fullscreenToggle：是否顯示全屏按鈕
controlBar的前提是controls為true，否則如何設(shè)置都不會顯示。
bigPlayButton
在視頻上顯示大播放按鈕。這樣同樣需要controls為true，否則設(shè)置為true也不會顯示。
userActions
用戶操作，也是一個Object（UserActions），有三個屬性：
click：是否允許單擊
doubleClick：是否允許雙擊
hotkeys：是否允許快捷鍵，也是一個Object，包括全屏、靜音和播放/暫停。
上面提到如果controls為true則同時支持用戶操作，如果想顯示控制欄又不允許這些用戶操作，則可以設(shè)置userActions禁止這些操作即可，這樣用戶就只能通過點擊控制欄上的按鈕來控制。
播放器操作
上面通過videojs創(chuàng)建了一個Player對像，我們就可以通過這個對象的各種函數(shù)來操作播放器。
同樣這里只說說常用的函數(shù)，其他的大家參考官網(wǎng)https://docs.videojs.com/player
src(string | SourceObject | SourceObject[])：設(shè)置視頻源src():string：獲取當前視頻源play()：播放pause()：暫停paused():boolean：是否暫停currentTime(number)：設(shè)置播放位置，就是seekcurrentTime():number：獲取當前播放位置muted():boolean：是否靜音muted(boolean)：設(shè)置靜音duration():number：獲取時長controls(boolean)：設(shè)置控制欄顯示隱藏controls():boolean：控制欄是否顯示requestFullscreen()：全屏播放exitFullscreen()：退出全屏播放isFullscreen():boolean：是否全屏播放dispose()：銷毀播放器error(MediaError)：設(shè)置一個錯誤error():MediaError：獲取當前錯誤。配合error事件
播放器事件
通過Player.on(string, EventListener)函數(shù)可以設(shè)置播放器的監(jiān)聽事件，第一個參數(shù)是事件名稱，第二個參數(shù)是回調(diào)。
同樣這里說說常用的事件，所有事件大家可以查閱官網(wǎng)https://docs.videojs.com/player
canplay：視頻可以播放
playing：播放
pause：暫停
timeupdate：播放進度更新
ended：播放完成
fullscreenchange：全屏狀態(tài)改變
error：視頻播放錯誤。可以配合player的error函數(shù)來獲取處理錯誤。代碼如下：
player.on("error", () => {const error = player.error();console.log("video error:" + error.code + "-" + error.message);});
自動播放
因為這個問題比較重要，所以我單獨詳細說一說
首先簡單說一下瀏覽器的自動播放機制：
為了防止部分網(wǎng)站已打開就播放各種聲音，尤其是廣告影響用戶體驗，chrome在66版本關(guān)閉了音頻自動播放，其他瀏覽器也有各自類似的機制。
不過chrome并不是完全禁止自動播放音頻，而且要求在有用戶交互行為前不允許自動播放音頻，所以剛打開頁面的時候（或刷新后）是不能自動播放音頻的，但是如果用戶有了交互，那么后續(xù)的音頻都可以自動播放了。
視頻實際上是受音頻影響，所以靜音的話是可以自動播放的。目前一般有兩種方式：一種就是視頻不自動播放，由用戶點擊播放；一種就是靜音自動播放，由用戶自己打開聲音。
但是我們可能有多條視頻逐個播放，所以不能每個視頻都靜音或手動播放，那么你們就會說可以在第一條視頻后設(shè)置自動播放，但是如果有其他頁面來到播放頁面，其實也可以自動播放，因為用戶一定已經(jīng)有過交互。
所以為了讓用戶有更流暢的體驗，我們將autoplay設(shè)置為"any"，這樣一定會自動播放，但是有時候（比如刷新后）會沒有聲音。
我們可以在playing事件中判斷一下當前是否靜音，如果靜音則提示用戶打開聲音即可，代碼如下：
VideoPlayer.player.on("playing", () => {
if (VideoPlayer.player.muted()) {
console.log("已靜音啦");
VideoPlayer.muteDialog?.destroy();
VideoPlayer.muteDialog = modal.showInfo({
titleTxt: "開啟聲音",
contentTxt: "瀏覽器已自動靜音，請手動開啟聲音",
okTxt: "開啟",
onConfirm: () => {
VideoPlayer.player.muted(false);
VideoPlayer.muteDialog = null;
}
});
}
});
這樣在大部分情況下用戶都可以流暢的觀看視頻。
微信
在微信的瀏覽器中無法進行自動播放，如果使用上面的代碼會發(fā)現(xiàn)視頻沒有自動播放，也沒有任何彈窗。這就需要我們?nèi)ナ謩硬シ?，可以在videojs配置的時候?qū)igPlayButton打開（注意controls也要設(shè)置為true），這樣默認會顯示一個大播放按鈕，用戶點擊即可以播放。
注意：controls設(shè)置為true后控制欄默認也會顯示，這樣當點擊大播放按鈕播放后，控制欄會顯示出來，如果不想顯示控制欄則將controlBar設(shè)置為false即可。
全屏播放
再來說說全屏播放，一般情況下我們會隱藏默認的控制欄來自己實現(xiàn)一個，然后蓋在video標簽區(qū)域的底部，但是這樣有一個問題：如果我們自己實現(xiàn)的功能有全屏播放，全屏播放的時候自己的控制欄就看不見了，這樣就沒法退出全屏了。
當然videojs提供了Components來使我們可以自定義控制欄，甚至可以在播放器上直接添加Button等，具體可見https://videojs.com/guides/components/ 。但是如果想完全實現(xiàn)一個不同樣式的控制欄則會非常復(fù)雜，需要大量的代碼。
所以我的解決方案是在非全屏的狀態(tài)下顯示自己的控制欄，在全屏的時候則顯示默認的控制欄，這樣全屏的時候也可以退出全屏了，這樣就需要我們監(jiān)聽全屏狀態(tài)，如下：
VideoPlayer.player.on("fullscreenchange", () => {VideoPlayer.player.controls(VideoPlayer.player.isFullscreen());});
然后在我們自己的控制欄上加一個全屏按鈕，點執(zhí)行VideoPlayer.player.requestFullscreen();全屏即可。