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

一般情况下，不需要设置视频海报，默认会显示视频的第一帧。

效果如下：