移动端video的项目

时间:2022-07-28
本文章向大家介绍移动端video的项目,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{margin: 0;padding: 0;list-style: none;}
		
	</style>
</head>
<body>
	<video>
		<source src="2.mp4" type="">
			<source src="3.mp4" type="">
				<source src="1.mp4">
	</video>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{margin: 0;padding: 0;list-style: none;}
#play{
	width: 60px;height: 30px;text-align: center;line-height: 30px;border: 1px solid red;background: black;cursor: pointer;
}

	</style>
</head>
<body>
	<video src="1.mp4" id="video"></video>
	<div id="play">播放</div>
	<script type="text/javascript">
		play.onmousedown=function()
		{
			return false;//取消默认的事件
		}
		play.onclick=function()
		{
			video.play();
		}
	</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{margin: 0;padding: 0;list-style: none;}
#play{
	width: 60px;height: 30px;text-align: center;line-height: 30px;
	border: 1px solid black;background: #ccc;
	cursor: pointer;
	float: left;
}
#time{width: 80px;height: 30px;text-align: center;line-height: 30px;
	border: 1px solid black;background: #ccc;float: left;}
	</style>
</head>
<body>
<video src='1.mp4' id='video'></video>
	<div id='play'>播放</div>
	<div id="time"><span id='current'>00</span>/<span id='allTime'>00</span></div>
	<script type="text/javascript">
		play.onmousedown=function()
		{
			return false;
		}
				var kaiguan = false;

		setTimeout(function()//获取总时间
		{
			allTime.innerHTML=video.duration.toFixed(1);
		},20);
		play.onclick = function(){
		if(!kaiguan){
			video.play();
			play.innerHTML = '暂停';
			kaiguan = true;
		}
		else{
			video.pause();
			play.innerHTML = '播放';
			kaiguan = false;
		}
	};
	
	video.addEventListener('timeupdate',function()//timeupdate,更新时间
		{
			current.innerHTML=video.currentTime.toFixed(1);
			allTime.innerHTML=video.duration.toFixed(1);
		},false);
	//思路:播放了就显示暂停文字,并且播放.并且显示下一次的条件
	//暂停了就显示播放文字,并且暂停,并且显示下一次的条件
	</script>
</body>
</html>