javascript实现HTML5 video视频播放暂停的简易代码

HTML标签video不使用control参数，通过自定义按钮实现视频播放暂停的代码，比较简单，适合只要播放暂停效果的需求。支持IE9+、手机浏览器。

javascript代码

function videoBtn(type, videoId, btnId){
	if(type == 'play'){
		var video = document.getElementById(videoId);
		var btn = document.getElementById(btnId);
		video.play();
		btn.style.display = 'none';
	}else{
		var video = document.getElementById(videoId);
		var btn = document.getElementById(btnId);
		video.pause();
		btn.style.display = 'block';
	}
}

HTML代码

<div class="videoBox">
	<video  
		id="video1" 
		src="upload/video.mp4" 
		poster="upload/poster.jpg" 
		webkit-playsinline="true" 
		playsinline="true" 
		x5-video-player-type="h5" 
		x5-video-player-fullscreen="true"
		x-webkit-airplay="allow" 
		x5-video-orientation="portraint" 					
		loop 
		onclick="videoBtn('pause','video1','btn1')" 
	>				
	</video>		
	<div id="btn1" class="playBtn" onclick="videoBtn('play','video1','btn1');"></div>
</div>

CSS代码

#videoBox {
	padding-bottom: 40.625%;
	position: relative;
}

#videoBox video {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#videoBox .playBtn {
	width: 70px;
	height: 70px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -35px;
	margin-left: -35px;
	background: url(../images/icon_play.png) no-repeat center center;
	background-size: contain;
	cursor: pointer;
	transition: transform .3s;
	border-radius: 50%;
}

#videoBox .playBtn:hover {
	transform: scale(0.8);
}

提示：icon_play.png 是一个播放按钮的图标，自行找个图标替上。