JS——视频播放(1)

最新推荐文章于 2024-10-27 15:19:20 发布

spfLinux

最新推荐文章于 2024-10-27 15:19:20 发布

阅读量340

点赞数

分类专栏： js 文章标签： JS 视频播放

js 专栏收录该内容

137 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/video.css">
</head>
<body>
	<div class="container">
		<!-- 视频 -->
		<video src="video/birds.mp4" id="v3">
			您的浏览器不支持video标签！
		</video>
		<!-- 按钮 -->
		<a href="#" class="crtl">
			<img src="video/pause.png" alt="">
		</a>
	</div>
	
	<script>
		var container=document.querySelector(".container");
		var crtl=document.querySelector(".crtl");
		crtl.style.display="none";
		container.onmouseover=function(){
			console.log("onmouseover");
			crtl.style.display="block";
		}
		container.onmouseout=function(){
			console.log("onmouseout");
			crtl.style.display="none";
		}

		var v3=document.getElementById("v3");
		var img3=document.querySelector(".crtl img");
		crtl.onclick=function(e){
			e.preventDefault();
			if(v3.paused){
				v3.play();
				img3.src="video/play.png";
			}else{
				v3.pause();
				img3.src="video/pause.png";
			}
		}
		v3.onpause=function(){
			img3.src="video/pause.png";
		}
		//结束了以后应该切换成停止按钮图片
	</script>
</body>
</html>