H5自定义video播放控件，播放暂停使用图标-Toy模板网

这篇具有很好参考价值的文章主要介绍了H5自定义video播放控件，播放暂停使用图标。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

大家都知道vedio的contorls属性可以将video的控件显示出来，包括播放、暂停、进度条、声量控制、全屏显示等。但是出于需求，往往需要将某些控件外形变成我们想要图标（但功能一样），而不是全部使用vedio自带的控件图标。

下面这个例子，我将隐藏video自带的播放按钮，使用自定义的播放、暂停图标作为控件，下面这个例子是从awesome图标库下载的图片，大家自行选择！

播放图标下载地址为：play-circle – Font Awesome 中文网

为了读者能够一目了然地了解制作效果，下面展示gif动图效果：

H5自定义video播放控件，播放暂停使用图标

HTML代码如下：

<div class="banner">
	<div class="Banner">
		<img src="images/icon.png" id="play_icon"></img>
		<img src="images/pauseIcon.png" id="pause_icon"></img>
		<!-- loop意思为循环播放， autoplay为自动播放 -->
		<video src="video/show.mp4" id ="myVideo" loop="loop" preload="auto" muted="muted" controls="controls"></video> 
	</div>
</div>

功能实现思路：

1、第一次打开页面，播放图标（控件）显示，其他控件隐藏

使用css实现

/* 播放图标 */
#play_icon{
	display: block;
	position: absolute;
	top: 160px;
	left: 465px;
	z-index: 3;
	border-radius: 50%; 
}

/* 暂停图标 */
#pause_icon{
    /* 将暂停图标隐藏*/
	display: none;
	position: absolute;
	top: 160px;
	left: 465px;
	z-index: 3;
	border-radius: 50%; 
    /*设透明度为0*/
	opacity: 0;
}

/* 将video控件的播放按钮隐藏 */
video::-webkit-media-controls-play-button {
    display: none;
}

2、当鼠标悬浮于video标签上方，video的控件显示，反之，隐藏所有控件以及图标

使用js实现（温馨提醒：需要引入ｊｕｑｅｒｙ库，才能使下面的代码起效果）

//当鼠标悬浮于视频的窗口时
	$("#myVideo").mouseover(function(){
		if(pauseIcon.style.display == "block"){
			pauseIcon.style.opacity = 1;
		}
		if(playIcon.style.display == "block"){
			playIcon.style.opacity = 1;
		}
		myVideo.controls = "controls";
		
	});

//当鼠标移出视频的窗口时
	$("#myVideo").mouseout(function(){
		if(pauseIcon.style.display == "block"){
			pauseIcon.style.opacity = 0;
		}
		if(playIcon.style.display == "block"){
			playIcon.style.opacity = 0;
		}
		myVideo.controls = false;
	});

3、当点击播放图标，隐藏播放图标、显示暂停图标，反之则反。

js实现：

//当播放图标被点击
	playIcon.addEventListener("click",function(){
		myVideo.play();
		pauseIcon.style.display = "block";
		playIcon.style.display = "none";
		
	});
	
	//当点击暂停图标时
	$("#pause_icon").click(function(){
		myVideo.pause();
		pauseIcon.style.display = "none";
		playIcon.style.display = "block";
		
	});

完整代码：

css:

/* 播放图标 */
#play_icon{
	display: block;
	position: absolute;
	top: 160px;
	left: 465px;
	z-index: 3;
	border-radius: 50%; 
}
#play_icon:hover{
	cursor: pointer;
	-webkit-filter: drop-shadow(0px 0px 10px white);
}
/* 暂停图标 */
#pause_icon{
	display: none;
	position: absolute;
	top: 160px;
	left: 465px;
	z-index: 3;
	border-radius: 50%; 
	opacity: 0;
}
#pause_icon:hover{
	cursor: pointer;
	-webkit-filter: drop-shadow(0px 0px 5px white);
}

video::-webkit-media-controls-play-button {
    display: none;
}

js代码：

$(document).ready(function(){
	var Banner = document.getElementsByClassName("Banner");
	var myVideo = document.getElementById("myVideo");
	var playIcon = document.getElementById("play_icon");
	var pauseIcon = document.getElementById("pause_icon");
	
	//当点击video窗口时
	$("#myVideo").click(function(){
		console.log(pauseIcon.style.display);
		if(pauseIcon.style.display == "none" || pauseIcon.style.display == ""){
			playIcon.style.display = "none";
			pauseIcon.style.display = "block";
			pauseIcon.style.opacity = 1;
		}else{
			pauseIcon.style.display = "none";
			playIcon.style.display = "block";
		}
	});
	
	//当播放图标被点击
	playIcon.addEventListener("click",function(){
		myVideo.play();
		pauseIcon.style.display = "block";
		playIcon.style.display = "none";
		
	});
	
	//当点击暂停图标时
	$("#pause_icon").click(function(){
		myVideo.pause();
		pauseIcon.style.display = "none";
		playIcon.style.display = "block";
		
	});
	
	//当鼠标悬浮于视频的窗口时
	$("#myVideo").mouseover(function(){
		if(pauseIcon.style.display == "block"){
			pauseIcon.style.opacity = 1;
		}
		if(playIcon.style.display == "block"){
			playIcon.style.opacity = 1;
		}
		myVideo.controls = "controls";
		
	});
	
	
	//当鼠标悬浮于暂停图标时
	$("#pause_icon").mouseover(function(){
		if(pauseIcon.style.display == "block"){
			pauseIcon.style.opacity = 1;
		}
		myVideo.controls = "controls";
	});
	
	//当鼠标移出视频的窗口时
	$("#myVideo").mouseout(function(){
		if(pauseIcon.style.display == "block"){
			pauseIcon.style.opacity = 0;
		}
		if(playIcon.style.display == "block"){
			playIcon.style.opacity = 0;
		}
		myVideo.controls = false;
	});
	
	//当鼠标悬浮于播放图标时
	$("#play_icon").mouseover(function(){
		if(playIcon.style.display == "block"){
			playIcon.style.opacity = 1;
		}
		myVideo.controls = "controls";
	});
	
});

另外，由于例子中使用了css样式的一些知识，比如元素定位(postion)、模糊阴影(drop-shadow)、透明度(pacity)等属性。

因为本篇文章主要讲述video控件的使用，css的一些内容需要大家去理解，如果不理解可以私信我，有空的话都为大家解释一下这其中的原因.

如果大家需要例子完整代码资源，包括图片、视频MP3、jquery库等等，可以在以下微信公众号回复　“视频控件”即可获得！

H5自定义video播放控件，播放暂停使用图标文章来源地址https://www.toymoban.com/news/detail-481565.html