当前位置:龙哥网 > 网络技术 > javascript实现HTML5 video视频播放暂停的简易代码

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

longge5个月前 (12-17)网络技术168

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

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

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 是一个播放按钮的图标,自行找个图标替上。

免责声明
本站部分资源来源于互联网 如有侵权 请联系站长删除
龙哥网是优质的互联网科技创业资源_行业项目分享_网络知识引流变现方法的平台为广大网友提供学习互联网相关知识_内容变现的方法。#转载请注明出处!

相关文章

jQuery 淡入效果显示元素 fadeIn()方法

jQuery 淡入效果显示元素 fadeIn()方法

假如被选元素是隐藏的,fadeIn() 方法使用淡入效果来显示被选元素 实例: 使用淡入效果来显示一个隐藏的 <p> 元素: $(".btn2").click(fu...

Active Server Pages 错误 'ASP 0131'解决方法

Active Server Pages 错误 'ASP 0131'解决方法

在Windows Server 2003中默认情况下是没有启动父路径的,所以当我们在ASP程序中引用包含文件时用到“..”,就会出现错误提示:“Active Server Pages 错误 'ASP...

针对IE9不支持placeholder的兼容处理方法代码

针对IE9不支持placeholder的兼容处理方法代码

IE9及IE9以下浏览器不支持placeholder属性,对IE9的placeholder兼容性处理方法通常是把placeholder的属性值放在value属性中,但这样不利于判断值是否为空,兼容性...

jquery判断鼠标上下滚动插件jquery.mousewheel.js(jquery鼠标滚动监听事件)

jquery判断鼠标上下滚动插件jquery.mousewheel.js(jquery鼠标滚动监听事件)

mousewheel.js是一个delta规范化、跨浏览器监听鼠标上下滚动的jquery插件,支持IE6+、Firefox、Chrome、Safari浏览器。 通过mousewheel.js插...

Linux CentOS zip unzip命令安装及参数详解

Linux CentOS zip unzip命令安装及参数详解

CentOS的zip、unzip命令分别用于压缩和解压zip文件。 安装命令 可以一起安装 yum install -y unzip zip 也可分别单独安装 yum ins...

浪子Pay-码支付即时到账系统源码(码支付即时到账支付源码)

浪子Pay-码支付即时到账系统源码(码支付即时到账支付源码)

浪子Pay-码支付即时到账系统 php版本要求: 5.6-7.4 注意!!!! 大家别把自己跟源码跟云端信息发出来 你们下载的每个源码里边的授权码特征码都不一样 如果你一旦泄露源码跟云端账号密码出去...