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

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

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

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

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

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库等等，可以在以下微信公众号回复“视频控件”即可获得！