网站首页 > 技术文章 正文
今天给小伙伴们推荐一款功能超赞的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%20-%20sparkle_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播放组件,欢迎留言讨论哈~~
猜你喜欢
- 2024-11-26 视频播放必备神器,解锁H5 Player的强大功能
- 2024-11-26 NAS下搭建具备web管理界面并自动上传视频的bilibili录播姬
- 2024-11-26 html5的面试中,大概率会问到的音频和视频的那些知识点
- 2024-11-26 老司机福利,迅雷X新版可以下载网页视频了
- 2024-11-26 随笔:前端音视频的那些名词
- 2024-11-26 基于flutter/dart仿抖音app实例
- 2024-11-26 今年找工作到底有多难,真的不好找工作吗 @抖音短视频
- 2024-11-26 基于flutter3.x跨端仿抖音app实战|flutter-douyin短视频直播
- 2024-11-26 Sketch 免费入门视频教程 - 设计/前端/产品都应该学的设计利器
- 2024-11-26 MiroTalk:基于 WebRTC 的免费 4K 实时视频会议框架
你 发表评论:
欢迎- 599℃几个Oracle空值处理函数 oracle处理null值的函数
- 591℃Oracle分析函数之Lag和Lead()使用
- 579℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 575℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 571℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 564℃【数据统计分析】详解Oracle分组函数之CUBE
- 550℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 545℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端懒加载 (49)
- 前端获取当前时间 (50)
- 前端接口 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)