介绍
Vue-CoreVideoPlayer 一款基于vue.js的轻量级的视频播放器插件。
采用Adobd XD进行UI设计，支持移动端适配,不仅功能强大，颜值也是超一流！
Vue-CoreVideoPlayer的说明文档和sample都很完善，上手十分容易。
该组件也保持了和原生HTML Video属性配置的对接，可定制性很高。
播放器的UI设计基于Adobe XD，官方也提供了基于Adobe XD的UI设计源文件，可供开发者和设计师们二次创作自定义播放器UI。
特性
支持个性化配置，可定制播放器主题界面
支持i18n（国际化），默认支持中文、英文和日文
支持服务端渲染
支持画中画模式
支持事件订阅
优秀的API设计，易于开发
移动端适配
提供playcore-hls解码插件，支持HLS直播流格式播放
快速上手
1 下载依赖
NPM下载
npm install --save vue-core-video-player
yarm下载
yarn add -S vue-core-video-player
直接使用
<script src="./dist/vue-core-vide-player.umd.min.js"></script>
2 项目引入--->main.js
import VueCoreVideoPlayer from 'vue-core-video-player'
Vue.use(VueCoreVideoPlayer)
3 播放组件使用
<div id="app">
<div class="player-container">
<vue-core-video-player :src="videoSource" :cover="cover" :title= "title" autoplay loop="true"/>
</div>
</div>
4 基本配置
-分辨率
<script>
export default {
name: 'app',
data() {
return {
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
}],
cover : "https://img1.wxzxzj.com/vpc-example-cover-your-name-c.png",
title : "你的名字"
}
}
}
</script>
5 事件的订阅
VueCoreVideoPlayer遵循W3C标准的媒体事件API,你可以前往MDN获取这些细节，下面罗列一些非常常用的事件：
play 表示当播放器开始播放或者通过 play() 方法从暂停状态恢复。
pause 当播放器停止播放的时候触发。
progress 当播放器正在下载媒体资源。
loadeddata 当播放器开始加载第一帧时候触发。
canplay 当加载足够数据可以满足基本播放后触发.。
durationchange 当媒体获取一定数据，并且完整的解析出 metadata 信息。
ended 当媒体播放结束时候触发。
timeupdate 当播放的媒体 currenttime 发生改变时候触发。
seeked 当用户 seek 操作完成触发。
'''
methods: {
paly() {
console.log("play");
},
pause(){
console.log("pause");
}
}
'''