vue-mini-player 基于Vue的一个轻量级HTML5视频播放器

XyPlayer 智能解析

一次购买包永久免费更新

无需安装无需数据库上传即用

全部开关,无需任何代码修改

强大的后台,支持修改各项配置

¥9.9 现在购买

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

vue-mini-player

基于 Vue 的一个轻量级视频播放组件,适配 PC 和移动端

vue-mini-player 基于Vue的一个轻量级HTML5视频播放器

安装

$ npm install vue-mini-player -S

使用

# main.js
import vueMiniPlayer from 'vue-mini-player'
import 'vue-mini-player/lib/vue-mini-player.css'
Vue.use(vueMiniPlayer)

在项目中使用 vueMiniPlayer

<template>
  <vueMiniPlayer ref="vueMiniPlayer" :video="video" :mutex="true" @fullscreen="handleFullscreen" />
</template>
<script>
  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>

💡 特色

1.轻量级 HTML5 播放器,精美 UI 控件,简单易上手 Gzip 压缩不足 10k

2.提供以 npm 的形式安装提供全局组件

3.多格式视频配置,移动端+PC 通用模式

  • 多类型视频支持
  • 自定义海报
  • 多平台兼容
  • 静音开关
  • 播放时间进度
  • 全屏支持
  • 拖动播放
  • 倍速播放
  • MSE 支持
  • 弹幕支持

✈️ 参数

名称 默认值 描述
mutex false 互斥,阻止多个播放器同时播放,当前播放器播放时暂停其他播放器
video - 视频相关参数
video.url - 视频播放源,支持 Array 形式传入多种视频格式
video.cover - 视频海报
video.muted false 是否静音播放
video.loop false 视频是否循环播放
video.preload ‘auto’ 视频预加载,可选值: ‘none’, ‘metadata’, ‘auto’
video.poster - 原生视频默认海报暂不设置,只设置 video.cover
video.volume 1 默认音量
video.autoplay false 视频自动播放

🚀 事件

名称 描述
fullscreen 全屏事件
ready 视频播放器准备好
clearMode 清洁模式执行
videoPlay 播放器执行 play 或者 pause
created 组件生命周期
mounted 组件生命周期
beforeDestroy 组件生命周期
destroyed 组件生命周期

GitHub:https://github.com/webweifeng/vue-mini-player 

未经允许不得转载:作者:Promise, 转载或复制请以 超链接形式 并注明出处 蚂蚁号
原文地址:《vue-mini-player 基于Vue的一个轻量级HTML5视频播放器》 发布于2019-07-26

分享到:
赞(0) 打赏

评论 抢沙发

9 + 4 =


vue-mini-player 基于Vue的一个轻量级HTML5视频播放器

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

热门影院
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册