Vue-CoreVideoPlayer 视频播放器组件

安装

cnpm install -S vue-core-video-player

快速使用

# 在main.js中
import VueCoreVideoPlayer from 'vue-core-video-player'
Vue.use(VueCoreVideoPlayer)  # 默认是英文的

'''做国际化'''
import VueCoreVideoPlayer from 'vue-core-video-player'
Vue.use(VueCoreVideoPlayer, {
  lang: 'zh-CN'  # 可以修改成中文
})

# 在你的组件中使用
<div id="app">
  <div class="player-container">
    <vue-core-video-player src="视频路径"></vue-core-video-player>
  </div>
</div>

基本配置

# 设置多分辨率视频，你必须resolution, src,默认的分辨率会选择 '720p'。可以指定选择的分辨率通过resolution这个属性来设置。
const videoSource = [
  {
    src: 'https://media.vued.vanthink.cn/sparkle_your_name_am360p.mp4',
    resolution: 360,
  }, {
    src: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4',
    resolution: 720,
  }, {
    src: 'https://media.vued.vanthink.cn/y2mate.com%20-%20sparkle_your_name_amv_K_7To_y9IAM_1080p.mp4',
    resolution: 1080
  }
]

视频播放控制

Props	Type	Example	Description
volume	number	0.5	控制视频音量(0-1)
muted	boolean	true	设置为 true, 视频会静音
cover	string	'./cover.png'	显示视频的封面，如果设置 autoplay，自动播放成功后，不会显示
title	string	'your title'	展示视频的标题，方便 SEO
logo	string	'./logo.png'	显示播放器的 logo
loop	boolean	true	会循环播放当前视频
preload	string	'metadata'	'none' 表示不会预加载视频; 'metadata' 表示只加载视频 metadata 信息部分

演示示例

<template>
    <div id="app">
        <div class="player-container">
            <vue-core-video-player  :src="videoSource" :cover="cover" :title= "title" loop="true"/>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                videoSource：'视频地址'
                cover : "显示视频的封面",
                title : "视频的标题"
            }
        }
    }
</script>

事件订阅

事件	触发条件
play	表示当播放器开始播放或者通过 play() 方法从暂停状态恢复
pause	当播放器停止播放的时候触发
progress	当播放器正在下载媒体资源
loadeddata	当播放器开始加载第一帧时候触发
canplay	当加载足够数据可以满足基本播放后触发
durationchange	当媒体获取一定数据，并且完整的解析出 metadata 信息
ended	当媒体播放结束时候触发
timeupdate	当播放的媒体 currenttime 发生改变时候触发
seeked	当用户 seek 操作完成触发

演示示例

<template>
  <div class="player-container">
    <vue-core-video-player :scr="path" @loadeddata="loaded" @play="playFunc" @pause="pauseFunc"></vue-core-video-player>
  </div>
<template>

<script>
export default {
  methods: {
    loaded () {
        console.log('视频开始加载第一帧的时候触发')
    },
    playFunc () {
        console.log('播放器开始播放或从暂停到播放状态')
    },
    pauseFunc () {
        console.log('视频停止播放的时候触发')
    }
  }
}