vue-mini-play vue視頻播放組件


基於 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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM