一、概述
基于 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>
一般情况下，不需要设置视频海报，默认会显示视频的第一帧。
效果如下：
