首页 > 其他分享> 文章详细

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

2021-11-08 09:05:43 阅读：115 来源： 互联网

标签：播放器 Vue name CoreVideoPlayer 播放 vue 组件 VueCoreVideoPlayer 轻量级

大家好，我是前端实验室的大师兄!

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

效果欣赏

介绍

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上开源，同时大师兄已经将Sample的代码上传到Github,大家在公众号后台回复播放器即可获取相关的学习资源哦~

进了前端门，便是一家人

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

标签：播放器,Vue,name,CoreVideoPlayer,播放,vue,组件,VueCoreVideoPlayer,轻量级
来源： https://blog.csdn.net/sinat_33680954/article/details/121181796

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9