基于 JavaScript的单击事件 实现 网页播放视频 的开关,以抖音首页为例
1、创建以视频为背景的html网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抖音</title>
</head>
<body>
<div class="container">
<div class="video-bg">
<video src="douyin.mp4" muted autoplay loop class="video-tvc" ></video>
</div>
<div class="content">
<div class="btn unmute"></div>
</div>
</div>
</body>
</html>
2、添加Javascript单击事件
<script type="text/javascript" >
( function(){
let video = document.querySelector( ".video-tvc" );
let btn = document.querySelector( ".btn" );
let action = function(){
// 如果时静音状态
if( video.muted ) {
video.muted = false ; // 让它不再沉默
btn.classList.remove( "unmute" );//为btn元素移除unmute这个class name
btn.classList.add( "mute" ); //为btn元素添加mute这个class name
} else {
video.muted = true ; // 让它沉默
btn.classList.remove( "mute" ); //为btn元素移除unmute这个class name
btn.classList.add( "unmute" ); //为btn元素添加mute这个class name
}
}
btn.addEventListener( "click" , action , false );
})();
</script>
3、添加CSS样式
<style type="text/css">
body { margin: 0 ; padding : 0 ; }
.container {
/* position 采用 absolute 表示相对于 浏览器窗口 或 第一个非static定位的父元素 进行定位 */
position: absolute ; /* 一定要注意.container的定位方式是absolute不是static */
left : 0 ;
top : 0 ;
width: 100% ;
height: 100% ;
}
.video-bg {
/* position 采用 absolute 表示相对于 浏览器窗口 或 第一个非static定位的父元素 进行定位 */
position: absolute ; /* 当父元素不是 static 定位时，就相对于父元素定位 */
left: 0 ;
top : 0 ;
width: 100% ;
height: 100% ;
z-index: -250 ;
}
.video-tvc {
/* position 采用 absolute 表示相对于 浏览器窗口 或 第一个非static定位的父元素 进行定位 */
position: absolute ; /* 当父元素不是 static 定位时，就相对于父元素定位 */
left: -10% ;
top: 0 ;
height: 100% ; /* 只设置视频的高度，因为视频尺寸是固定比例 */
}
.content {
/* position 采用 absolute 表示相对于 浏览器窗口 或 第一个非static定位的父元素 进行定位 */
position: absolute ; /* 当父元素不是 static 定位时，就相对于父元素定位 */
left: 0 ;
top : 0 ;
width: 100% ;
height: 100% ;
z-index: 250 ;
}
.btn {
width: 22px ; height: 22px ; border: 1px solid grey ;
background-size: 22px 22px ;
}
.unmute { background-image: url("unmute.png") ; }
.mute { background-image: url("mute.png") ; }
</style>
4、总结
通过添加JavaScript单击事件，实现了元素的同时增加和减少，达到控制播放的目的。
