大家好,我是程序视点的小二哥!今天小二哥给大家推荐一款非常优秀的视频播放组件
效果欣赏
介绍
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
使用yarn
$ 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>
上面我们说到VueCoreVideoPlayer
组件保持了和原生HTML Video
属性配置的对接,可以看到小二哥在这里使用了autoplay
和loop
属性,其他属性也是一样的使用方式哦~这样一个简单的播放器就已经集成完啦~
4.基本配置
设置视频源,这里Sample
小二哥使用了多分辨率作为效果展示。
<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>
如果是使用一个视频文件的相对地址或者你的CDN地址方式:
<vue-core-video-player src="https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4"/>
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"); }
}
作为一款优秀的现代视频播放组件,别忘了VueCoreVideoPlayer
还支持i18n(国际化),默认支持中文、英文和日文;同时还提供了一款HLS
解码插件playcore-hls
支持HLS的播放,更多的功能及使用大家自己可以去实践一下!
VueCoreVideoPlayer
已经在Github
上开源,大家可以自行获取相关的学习资源哦~
https://core-player.github.io/vue-core-video-player/zh/
如果你用VUE做开发,那就赶紧试试吧!如文章对你有所帮助,别忘了点赞、留言、分享哦!