vue 視頻播放

一、概述

基於 Vue 的一個輕量級視頻播放組件,適配 PC 和移動端。

官方鏈接:https://webweifeng.github.io/vue-mini-player/

 

特色

1.輕量級 HTML5 播放器,精美 UI 控件,簡單易上手

2.提供以 npm 的形式安裝提供全局組件

3.多格式視頻配置,移動端+PC 通用模式

  • 多類型視頻支持
  • 自定義海報
  • 多平臺兼容
  • 靜音開關
  • 播放時間進度
  • 全屏支持
  • 拖動播放
  • 倍速播放
  • MSE 支持
  • 彈幕支持

 

二、安裝

npm install vue-mini-player -S

 

三、使用

test.vue

<template>
  <div style="width: 500px;height: 300px">
    <vueMiniPlayer ref="vueMiniPlayer" :video="video" :mutex="true" @fullscreen="handleFullscreen" />
  </div>
</template>
<script>
  import Vue from 'vue'
  import vueMiniPlayer from 'vue-mini-player'
  import 'vue-mini-player/lib/vue-mini-player.css'
  Vue.use(vueMiniPlayer)
  export default {
    data () {
      return {
        video: {
          // 視頻播放源
          url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
          // 視頻海報
          // cover: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
          muted: false, // 是否靜音播放
          loop: false, // 視頻是否循環播放
          preload: 'auto', // 視頻預加載
          poster: '', // 原生視頻默認海報暫不設置
          volume: 1, // 默認音量
          autoplay: false, // 視頻自動播放
        }
      }
    },
    // computed:{
    //   video(){
    //     return this.$refs.vueMiniPlayer.$video;
    //   }
    // },
    methods:{
      handleFullscreen(){

      }
    }
  }
</script>
View Code

一般情況下,不需要設置視頻海報,默認會顯示視頻的第一幀。

 

效果如下:

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章