適用于 Vue 的播放器組件Vue-Video-Player操作
如果h5的標(biāo)簽<vedio>不能滿(mǎn)足你的需求，那就用這個(gè)組件Vue-Video-Player吧，也許可以覆蓋到你的需求。
<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" ></video-player>
配置參數(shù)：
playerOptions: {
height: 400,
playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
autoplay: false, // 如果true,瀏覽器準(zhǔn)備好時(shí)開(kāi)始回放。
muted: false, // 默認(rèn)情況下將會(huì)消除任何音頻。
loop: false, // 導(dǎo)致視頻一結(jié)束就重新開(kāi)始。
preload: "auto", // 建議瀏覽器在<video>加載元素后是否應(yīng)該開(kāi)始下載視頻數(shù)據(jù)。auto瀏覽器選擇最佳行為,立即開(kāi)始加載視頻（如果瀏覽器支持）
language: "zh-CN",
aspectRatio: "16:9", // 將播放器置于流暢模式，并在計(jì)算播放器的動(dòng)態(tài)大小時(shí)使用該值。值應(yīng)該代表一個(gè)比例 - 用冒號(hào)分隔的兩個(gè)數(shù)字（例如"16:9"或"4:3"）
fluid: true, // 當(dāng)true時(shí)，Video.js player將擁有流體大小。換句話說(shuō)，它將按比例縮放以適應(yīng)其容器。
sources: [
{
type: "video/mp4", // 這里的種類(lèi)支持很多種：基本視頻格式、直播、流媒體等，具體可以參看git網(wǎng)址項(xiàng)目
src: require("@/assets/vedio.mp4") // url地址
}
],
poster: require("@/assets/poster.png"), // 你的封面地址
// width: document.documentElement.clientWidth, //播放器寬度
notSupportedMessage: "此視頻暫無(wú)法播放，請(qǐng)稍后再試", // 允許覆蓋Video.js無(wú)法播放媒體源時(shí)顯示的默認(rèn)信息。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true // 全屏按鈕
}
},
具體使用自行查閱，附上鏈接
https://www.npmjs.com/package/vue-video-player
補(bǔ)充知識(shí)：vue 關(guān)于在安卓低版本下空白頁(yè)
上網(wǎng)搜索了好些原因都沒(méi)解決，猜測(cè)是哪部分代碼不兼容，最后注釋代碼一步步排查原因
然后發(fā)現(xiàn)是swiper的鍋，我們用的高版本5.3.6的版本，應(yīng)該是安卓低版本不兼容swiper5的es6或es7高級(jí)語(yǔ)法
后面回退到3.4.2版本，成功解決
總結(jié)：
以后要注意各種插件版本的兼容性
以上這篇適用于 Vue 的播放器組件Vue-Video-Player操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue Element前端應(yīng)用開(kāi)發(fā)之組織機(jī)構(gòu)和角色管理
本篇文章繼續(xù)深化Vue Element權(quán)限管理模塊管理的內(nèi)容，介紹組織機(jī)構(gòu)和角色管理模塊的處理，使得我們了解界面組件化模塊的開(kāi)發(fā)思路和做法，提高我們界面設(shè)計(jì)的技巧，并減少代碼的復(fù)雜性，提高界面代碼的可讀性，同時(shí)也是利用組件的復(fù)用管理。2021-05-05
這篇文章主要介紹了如何在前端項(xiàng)目中使用terser-webpack-plugin插件來(lái)刪除代碼中的console.log語(yǔ)句,以避免在正式環(huán)境中輸出調(diào)試信息,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
本文主要介紹了vue3 ref 和reactive的區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
vue項(xiàng)目開(kāi)發(fā)中setTimeout等定時(shí)器的管理問(wèn)題
這篇文章主要介紹了vue項(xiàng)目開(kāi)發(fā)中setTimeout等定時(shí)器的管理問(wèn)題,需要的朋友可以參考下2018-09-09
Vite配置優(yōu)雅的code?spliiting代碼分割詳解
這篇文章主要為大家介紹了Vite配置優(yōu)雅的code?spliiting代碼分割詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue 獲取到數(shù)據(jù)但卻渲染不到頁(yè)面上的解決方法
這篇文章主要介紹了vue 獲取到數(shù)據(jù)但卻渲染不到頁(yè)面上的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
vue中vue-router的使用說(shuō)明(包括在ssr中的使用)
這篇文章主要介紹了vue中vue-router的使用說(shuō)明(包括在ssr中的使用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue動(dòng)態(tài)組件之:is在組件中的使用場(chǎng)景
這篇文章主要介紹了vue動(dòng)態(tài)組件之:is在組件中的使用場(chǎng)景,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
elementUI table表格動(dòng)態(tài)合并的示例代碼
這篇文章主要介紹了elementUI table表格動(dòng)態(tài)合并的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue關(guān)閉瀏覽器退出登錄的實(shí)現(xiàn)示例
本文主要介紹了vue關(guān)閉瀏覽器退出登錄，一般都是根據(jù)根據(jù)beforeunload和unload這兩個(gè)事件執(zhí)行的。本文就詳細(xì)的介紹一下如何實(shí)現(xiàn)，感興趣的可以了解一下2021-12-12