The vue-player from elonehoo

vue-player's Introduction

基于 Vue 的一个轻量级视频播放组件，适配 PC 和移动端原作者 QiaoJianFeng

安装

$ 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 控件，简单易上手

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

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

✈️ 参数

名称	默认值	类型	描述
video	-		视频相关参数
mutex	false	Boolean	互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
video.url	-	String,Array	视频播放源，支持 Array 形式传入多种视频格式
video.cover	-	String	视频海报
video.muted	false	Boolean	是否静音播放
video.loop	false	Boolean	视频是否循环播放
video.preload	'auto'	String	视频预加载，可选值: 'none', 'metadata', 'auto'
video.poster	-	String	原生视频默认海报暂不设置，只设置 video.cover
video.volume	1	String,Number	默认音量
video.autoplay	false	Boolean	视频自动播放
video.playsinline	false	Boolean	视频行内播报
video.crossOrigin	false	String	视频源跨域 corss 可选值: 'anonymous', 'use-credentials'
video.logo	-	String	播放器 logo
video.logoStyle	-	Object,String	播放器 logo 样式，参数格式为{color:'#fff'} or "color:#fff"

🚀 事件

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

vue-player's People

Contributors

Stargazers

Watchers

vue-player's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Update dependency vue-template-compiler to v2.7.13
Update dependency @vue/test-utils to v2.1.0
Update dependency eslint to v8.26.0
Update dependency eslint-plugin-vue to v9.6.0
Update dependency sass-loader to v13.1.0
Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

package.json

core-js ^3.0.0

vue ^3.0.0

@vue/cli-plugin-babel 5.0.8

@vue/cli-plugin-eslint 5.0.8

@vue/cli-plugin-unit-mocha 5.0.8

@vue/cli-service 5.0.8

@vue/eslint-config-standard 8.0.1

@vue/test-utils 2.0.2

babel-eslint 10.1.0

chai 4.3.6

eslint 8.23.0

eslint-plugin-vue 9.4.0

node-sass 7.0.3

sass-loader 13.0.2

vue-template-compiler 2.7.10