Video标签上面覆盖播放按钮点击播放

最新推荐文章于 2024-06-09 21:59:09 发布

一叶一菩提魁

最新推荐文章于 2024-06-09 21:59:09 发布

阅读量866

点赞数

文章标签： css3 html javascript

本文链接：https://blog.youkuaiyun.com/A980719/article/details/123086751

版权

本文介绍了如何在HTML的Video标签上添加一个播放按钮，通过CSS3和JavaScript实现点击按钮播放视频的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接复制就可以跑
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
.div1{
    width:100%;
    height:100px;
}
.div2{
    width:100%;
    height:500px;
    border:1px solid red;             
    position: relative;          // 相对定位
	background-color:red ;
}
.pos2{
    width:50px;
    height:50px;
	z–index:9999;	
    background: url(2.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%); 
   
	
   
}

</style>
</head>
<body>
<div class="div1">
<div class="div2">
<video id="video" width="100%" height="500" class="div3" controls>
  <source src="test.mp4"  type="video/mp4">
</video>

    <div class="pos2">
	</div>
</div>

<div class="div2">
<video id="video" width="100%" height="500" class="div3" controls>
  <source src="test.mp4"  type="video/mp4">
</video>
    <div class="pos2">
	</div>
</div>
</div>
</body>
   <script type="text/javascript">
	
	$(".pos2").click(function(){
		$(this).siblings()[0].play();	
	})

       $("video").each(function (key, item) {
           let a = $("video").get(key).addEventListener('play', function (e) {
              $(this).siblings().hide();
           });   
		   let b = $("video").get(key).addEventListener('pause', function (e) {
                  $(this).siblings().show();
           });
		   
        });
    
</script>
</script>
</html>