今天给小伙伴们推荐一款功能超赞的vue.js视频播放器组件VueCoreVideoPlayer。
vue-core-video-player 一个基于Vue超轻量级的视频播放器组件。采用 Adobd XD 进行UI设计，支持移动端适配。
特性
- 个性化UI配置
- i18n
- 服务端渲染
- 画中画模式
- 事件订阅
- 易于开发
- 支持移动端适配
安装
$ npm i vue-core-video-player -S
使用插件
<template>
<div class="player-container">
<vue-core-video-player
src="/assets/xxx.mp4"
@loadedmetadata="loaded"
@play="playFunc"
@pause="pauseFunc"
@error="errorHandle"
>
</vue-core-video-player>
</div>
<template>
<script>
import VueCoreVideoPlayer from 'vue-core-video-player'
export default {
methods: {
loaded () {
// ...
},
playFunc () {
// ...
},
pauseFunc () {
// ...
},
errorHandle (e) {
// ...
},
}
}
</script>
支持设置多分辨率视频，默认的分辨率是 '720p'，通过 resolution 这个属性来设置。
const videoSource = [
{
src: 'assets/xxx.mp4',
resolution: 360,
}, {
src: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4',
resolution: 720,
}, {
src: 'https://media.vued.vanthink.cn/y2mate.com - sparkle_your_name_amv_K_7To_y9IAM_1080p.mp4',
resolution: 1080
}
]
附上示例演示及仓库地址
# 文档说明
https://core-player.github.io/vue-core-video-player/
# 示例地址
https://events.jackpu.com/vue-core-video-player-examples/
# github地址
https://github.com/core-player/vue-core-video-player
ok，今天就分享到这里。希望能对你有些帮助！如果大家有其他Vue播放组件，欢迎留言讨论哈~~
,
