VueCoreVideoPlayer一款基于vue.js的轻量级、优秀的视频播放器组件

大家好&＃xff0c;我是前端实验室的大师兄!

今天大师兄给大家推荐一款非常优秀的视频播放组件

效果欣赏

介绍

Vue-CoreVideoPlayer 一款基于vue.js的轻量级的视频播放器插件。
采用Adobd XD进行UI设计&＃xff0c;支持移动端适配,不仅功能强大&＃xff0c;颜值也是超一流&＃xff01;

Vue-CoreVideoPlayer的说明文档和sample都很完善&＃xff0c;上手十分容易。

该组件也保持了和原生HTML Video属性配置的对接&＃xff0c;可定制性很高。

播放器的UI设计基于Adobe XD&＃xff0c;官方也提供了基于Adobe XD的UI设计源文件&＃xff0c;可供开发者和设计师们二次创作自定义播放器UI。

特性

• 支持个性化配置&＃xff0c;可定制播放器主题界面
• 支持i18n&＃xff08;国际化&＃xff09;&＃xff0c;默认支持中文、英文和日文
• 支持服务端渲染
• 支持画中画模式
• 支持事件订阅
• 优秀的API设计&＃xff0c;易于开发
• 移动端适配
• 提供playcore-hls解码插件&＃xff0c;支持HLS直播流格式播放

快速上手

1.下载依赖

使用NPM

$ npm install --save vue-core-video-player


使用yarn

$ yarn add -S vue-core-video-player


直接引入

<script src&＃61;"./dist/vue-core-vide-player.umd.min.js">script>


2.引入模块

编辑 main.js 然后引入模块

import VueCoreVideoPlayer from &＃39;vue-core-video-player&＃39;Vue.use(VueCoreVideoPlayer)


3.播放组件使用

<div id&＃61;"app"><div class&＃61;"player-container"><vue-core-video-player :src&＃61;"videoSource" :cover&＃61;"cover" :title&＃61; "title" autoplay loop&＃61;"true"/>div>
div>


上面我们说到VueCoreVideoPlayer组件保持了和原生HTML Video属性配置的对接&＃xff0c;可以看到大师兄在这里使用了autoplay和loop属性&＃xff0c;其他属性也是一样的使用方式哦~

这样一个简单的播放器就已经集成完啦~

4.基本配置

设置视频源&＃xff0c;这里Sample大师兄使用了多分辨率作为效果展示。

<script>export default {name: &＃39;app&＃39;,data() {return {videoSource: [{src: &＃39;https://media.vued.vanthink.cn/sparkle_your_name_am360p.mp4&＃39;,resolution: 360,}, {src: &＃39;https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4&＃39;,resolution: 720,}, {src: &＃39;https://media.vued.vanthink.cn/y2mate.com%20-%20sparkle_your_name_amv_K_7To_y9IAM_1080p.mp4&＃39;,resolution: 1080}],cover : "https://img1.wxzxzj.com/vpc-example-cover-your-name-c.png",title : "你的名字"}}}
</script>


如果是使用一个视频文件的相对地址或者你的CDN地址方式&＃xff1a;

<vue-core-video-player src&＃61;"https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4"/>


5.事件订阅

VueCoreVideoPlayer遵循W3C标准的媒体事件API,你可以前往MDN获取这些细节&＃xff0c;下面罗列一些非常常用的事件&＃xff1a;

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

methods: {paly() {console.log("play");},pause(){console.log("pause");}
}


作为一款优秀的现代视频播放组件&＃xff0c;别忘了VueCoreVideoPlayer还支持i18n&＃xff08;国际化&＃xff09;&＃xff0c;默认支持中文、英文和日文&＃xff1b;同时还提供了一款HLS解码插件playcore-hls支持HLS的播放&＃xff0c;更多的功能及使用大家自己可以去实践一下&＃xff01;

VueCoreVideoPlayer已经在Github上开源&＃xff0c;同时大师兄已经将Sample的代码上传到Github,大家在公众号后台回复播放器即可获取相关的学习资源哦~

进了前端门&＃xff0c;便是一家人

原创不易,点赞、留言、分享就是大师兄写下去的动力!