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

大家好,我是程序视点的小二哥!今天小二哥给大家推荐一款非常优秀的视频播放组件
Vue CoreVideoPlayer

效果欣赏

Vue CoreVideoPlayer

介绍

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属性配置的对接,可以看到小二哥在这里使用了autoplayloop属性,其他属性也是一样的使用方式哦~这样一个简单的播放器就已经集成完啦~

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做开发,那就赶紧试试吧!如文章对你有所帮助,别忘了点赞、留言、分享哦!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/372987.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

我们公司落地大模型的路径、方法和坑

我们公司落地大模型的路径、方法和坑 李木子 AI大模型实验室 2024年07月02日 18:35 北京 最近一年&#xff0c;LLM&#xff08;大型语言模型&#xff09;已经成熟到可以投入实际应用中了。预计到 2025 年&#xff0c;AI 领域的投资会飙升到 2000 亿美元。现在&#xff0c;不只…

【Java 的四大引用详解】

首先分别介绍一下这几种引用 强引用&#xff1a; 只要能通过GC ROOT根对象引用链找到就不会被垃圾回收器回收&#xff0c;当所有的GC Root都不通过强引用引用该对象时&#xff0c;才能被垃圾回收器回收。 软引用&#xff08;SoftReference&#xff09;&#xff1a; 当只有软引…

Tomcat部署以及优化

1、tomcat tomcat是用java代码的程序&#xff0c;运行的是java的web服务器 tomcat和php一样都是用来处理动态页面&#xff0c;tomcat也可以做为web应用服务器&#xff0c;开源的 php处理.php为结尾的 tomcat 处理.jsp nginx 处理 .html 2、tomcat的特点和功能 1、servle…

超详细!Jmeter 压测-设计5W并发量场景

需求&#xff1a;设计一个5W并发量的性能场景&#xff1f; 1、确定性能测试工具&#xff0c;性能测试思路 测试工具&#xff1a;Jmeter 并发设计思路&#xff1a;如果被测服务足够快&#xff0c;比如10ms的响应时间&#xff0c;1个线程/秒就是100tps&#xff0c;5万的TPS&…

MySQL之基本查询(上)-表的增删查改

目录 Create(创建) 案例建表 插入 单行数据 指定列插入 单行数据 全列插入 多行数据 全列插入 插入是否更新 插入时更新 替换 Retrieve(读取) 建表插入 select列 全列查询 指定列查询 查询字段为表达式 为查询结果指定别名 结果去重 where条件 比较运算符 逻辑运…

嵌入式代码升级——IAP

目录 IAP的特点 实现 IAP 功能 STM32 正常的程序运行流程 STM32 加入IAP后的运行流程 程序执行流程 BootLoader程序 APP1程序 APP2程序 验证操作步骤 IAP&#xff08;In-Application Programming&#xff09;指的是在应用程序运行时对其自身的Flash存储器进行编程的操作…

招投标信息采集系统:让您的企业始终站在行业前沿

一、为何招投标信息如此关键&#xff1f; 在经济全球化的大背景下&#xff0c;招投标活动日益频繁&#xff0c;成为企业获取项目、拓展市场的主流方式之一。招投标信息采集&#xff0c;作为企业战略决策的前置环节&#xff0c;其重要性不言而喻。它不仅关乎企业能否第一时间发…

如何网页在线编辑微软Office Word,并导出为PDF格式。

随着互联网技术的不断发展&#xff0c;越来越多的企业开始采用在线办公模式&#xff0c;微软Office Word 是最好用的文档编辑工具&#xff0c;然而doc、docx、xls、xlsx、ppt、pptx等格式的Office文档是无法直接在浏览器中直接打开的&#xff0c;如果可以实现Web在线预览编辑Of…

git只列出本地分支

git只列出本地分支 git branch --list git强制删除本地分支 git branch -D_error: the branch dlx-test is not fully merged. -CSDN博客文章浏览阅读648次。git branch -d 可以通过: git branch 查看所有本地分支及其名字&#xff0c;然后删除特定分支。git删除远程remote分支…

互联网医院系统,开发互联网医院设计哪些功能?

随着科技的进步和数字化转型的推动&#xff0c;互联网医院系统已成为现代医疗服务的重要组成部分。这一系统通过整合信息技术与医疗资源&#xff0c;为用户提供便捷、高效的医疗服务。以下是互联网医院系统的主要功能介绍。 1、在线咨询与诊断 互联网医院系统允许患者通过网络平…

IEC62056标准体系简介-2.IEC62056标准体系及对象标识系统(OBIS)

1. IEC 62056标准体系 IEC 62056标准体系目前共包括六部分&#xff0c;见图1&#xff1a; 第61部分&#xff1a;对象标识系统第62部分&#xff1a;接口类第53部分&#xff1a;COSEM应用层第46部分&#xff1a;使用HDLC&#xff08;High Level Data Link Control&#xff09;协…

54、一维和二维自组织映射(matlab)

1、一维和二维自组织映射原理 一维和二维自组织映射&#xff08;Self-Organizing Maps, SOM&#xff09;是一种无监督的机器学习算法&#xff0c;通过学习输入数据的拓扑结构&#xff0c;将高维输入数据映射到低维的网格结构中&#xff0c;使得相似的输入数据点在映射空间中也…

阿尔泰科技与西安交通大学陕西省某技术重点实验室共谋未来!

近日&#xff0c;阿尔泰科技的电子工程师&#xff08;熊工&#xff09;应邀前往西安交通大学陕西省某技术重点实验室&#xff0c;参与课题组项目的测试与调试工作。此次合作不仅成功推动了项目的进展&#xff0c;还为未来的深入合作奠定了坚实基础。 阿尔泰科技作为领先的测控技…

刷题之删除有序数组中的重复项(leetcode)

删除有序数组中的重复项 这题简单题&#xff0c;双指针&#xff0c;一个指针记录未重复的数的个数&#xff0c;另一个记录遍历的位置。 以下是简单模拟&#xff0c;可以优化&#xff1a; class Solution { public:int removeDuplicates(vector<int>& nums) {int l0…

Debezium报错处理系列之第114篇:No TableMapEventData has been found for table id:256.

Debezium报错处理系列之第114篇:Caused by: com.github.shyiko.mysql.binlog.event.deserialization.MissingTableMapEventException: No TableMapEventData has been found for table id:256. Usually that means that you have started reading binary log within the logic…

博美犬插画:成都亚恒丰创教育科技有限公司

​博美犬插画&#xff1a;萌动心灵的细腻笔触 在浩瀚的艺术海洋中&#xff0c;有一种艺术形式总能以它独有的温柔与细腻&#xff0c;触动人心最柔软的部分——那便是插画。而当插画遇上博美犬这一萌宠界的明星&#xff0c;便诞生了一幅幅令人爱不释手的作品&#xff0c;成都亚…

代码随想录打卡第十八天

代码随想录–二叉树部分 day 17 休息日 day 18 二叉树第五天 文章目录 代码随想录--二叉树部分一、力扣654--最大二叉树二、力扣617--合并二叉树三、力扣700--二乘树中的搜素四、力扣98--验证二叉搜索树 一、力扣654–最大二叉树 代码随想录题目链接&#xff1a;代码随想录 给…

美容师有什么话术技巧?美业人如何提升自己的销售技巧?博弈美业门店管理系统分享经验

作为一名美容师&#xff0c;有一些话术和销售技巧可以帮助你提升服务质量和销售业绩。以下是博弈美业收银系统分享的一些建议&#xff1a; 1.建立信任&#xff1a; 在与客户交流时&#xff0c;表现出真诚、友好和专业的态度。倾听客户的需求&#xff0c;并给予针对性的建议&a…

随笔(一)

1.即时通信软件原理&#xff08;发展&#xff09; 即时通信软件实现原理_即时通讯原理-CSDN博客 笔记&#xff1a; 2.泛洪算法&#xff1a; 算法介绍 | 泛洪算法&#xff08;Flood fill Algorithm&#xff09;-CSDN博客 漫水填充算法实现最常见有四邻域像素填充法&#xf…

Redis代替Session实现共享

集群的session共享问题 session共享问题&#xff1a;多台tomcat并不共享session存储空间&#xff0c;当请求切换到不同的tomcat服务时导致数据丢失的问题。 session的替代方案&#xff1a; 数据共享内存存储key、value结构 将redis替换session可以解决session共享问题