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