基於 Vue 的一個輕量級視頻播放組件,適配PC和移動端
vue-mini-player使用方法:
安裝
npm install vue-mini-player -S
在main.js中引入,使用use中間件使用
impor vueMiniPlayer from 'vue-mini-player' impor 'vue-mini-player/lib/vue-mini-player.css' Vue.use(vueMiniPlayer)
在html中使用
<vueMiniPlayer v-if="isactivebrief" ref="vueMiniPlayer" :video="video" :mutex="true" @fullscreen="handleFullscreen" />
data中定義vueMiniPlayer的數據
video:{ url:'', //后端返回的視頻地址 cover:'', //播放前默認展示的圖片,提高用戶體驗 muted: false, //表示視頻是否靜音,默認false。 loop: false, //表示視頻是否在結束時再播放 preload: "auto", //表示是否在完成頁面加載后,載入視頻,可選三個取值為:none、metadata、auto poster: "", //顯示您設置的圖像,即一個帶有預覽圖的視頻播放 volume: 1, //將視頻音量設置為100%,0.1為10%,以此類推 autoplay: false, //表示只要網頁中的視頻加載完成就會開始自動播放視頻
},
可以通過計算屬性和方法來展示
computed: { $video() { return this.$refs.vueMiniPlayer.$video; } }, methods: { handleFullscreen() {} },
效果圖如下:
參考鏈接:https://github.com/webweifeng/vue-mini-player