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