clappr：可扩展网页媒体播放器使用（在vue中的使用）

最新推荐文章于 2024-08-09 08:20:05 发布

甜菜，是我鸭！

最新推荐文章于 2024-08-09 08:20:05 发布

阅读量2.2k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript html 视频播放器

本文链接：https://blog.csdn.net/baicai_123/article/details/122985519

版权

Vue Clappr 视频播放事件监听媒体控制

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、安装

cnpm install clappr --save

2、引用

在需要使用的vue组件中引入即可，

import Clappr from 'clappr';

3、使用

</div>

var mp4Url = dataV[0].视频地址;
                var playerElement = document.getElementById("videoPlayer123");
                var player = new Clappr.Player({
		            source: mp4Url,
					mute: false, //静音为true
					width:'100%',
					height:'100%',
					// poster:'http://clappr.io/poster.png', //设置封面图
					autoPlay: false,
					disableCanAutoPlay: true, //禁用检测浏览器是否可以自动播放视频
					hideMediaControl: true, //禁用媒体控制自动隐藏
					hideMediaControlDelay: 100, //更改默认的媒体控件自动隐藏超时值
					hideVolumeBar: true, //当嵌入的宽度小于320时，音量条将被隐藏
					// watermark: 'img/ticket.jpg', //在视频上自动添加水印
					position: 'top-right', //水印位置四个角bottom-left，bottom-right，top-left和top-right
					// watermarkLink: 'http://simple.com',//定义单击水印时打开的URL 未定义不可点击
					exitFullscreenOnEnd: false, //禁用播放器将在媒体结束时自动退出全屏显示，即播放结束后不会退出全屏
					mediacontrol: {seekbar: "#000", buttons: "#FFF"}, //定义进度条和底部暂停等图标的颜色
					events: {
						onPlay: function() { //当播放时
							console.log("播放")
						},
						onPause: function() { //当暂停时
							console.log("暂停")
						},
						onEnded: function() { //放播放结束时
							console.log("结束")
						},
						onSeek: function() { //当查找视频进度时
							console.log("快进/后退")
						},
						onError: function() { //当播放出错时
							alert("播放出错!")
						},
						onTimeUpdate: function(e) { // e.current - 当前播放时间   e-total - 总时长
							console.log(e)
						},
					}
		        });
                player.attachTo(playerElement); //添加资源到dom中