JavaScript——监听事件：点击鼠标，视频静音（原神官网）-Toy模板网

这篇具有很好参考价值的文章主要介绍了JavaScript——监听事件：点击鼠标，视频静音（原神官网）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

JavaScript——监听事件：点击鼠标，视频静音

用JS实现视频的静音，可以实现如图按钮所有功能,时间也和视频同步，JS实现。
如图所示，
JavaScript——监听事件：点击鼠标，视频静音（原神官网）
首先搭个结构

<div class="audio-controller" id="audio_on">
            <img src="./images/musicon.png" alt="" id="audio_heaserimg" style="width: 100%;">
        </div>
        <div class="audio-controller" id="audio_off" style="display: none;">
            <img src="./images/musicoff.png" alt="" id="audio_heaserimg" style="width: 100%;">
        </div>

再来看看CSS样式表

用css定位，把元素定位到相应的位置

.audio-controller {
  position: absolute;
  top: 18px;
  left: 70px;
  width: 30px;
  height: 30px;
  z-index: 999;
  cursor: pointer;
}

最后事件监听要看JavaScript实现
原理：

先用用js获取到元素，然后对元素添加监听事件，（事件：鼠标点击时）
监听到事件后，要执行的事件就有两件：1、音频按钮的图标改变，禁止按钮出现/消失
								 2、视频静音/取消静音

代码：

window.addEventListener('load', function () {
	//导航区
	let audiu_on = document.getElementById('audio_on')
	let audioimg = document.getElementById('audio_headerimg')
	let audio_off = this.document.getElementById('audio_off')
	//音频播放
	
	let videoyuans = document.getElementById("bgVideo");
	audiu_on.addEventListener('click',()=>{
		audio_off.style.display = 'block'
		videoyuans.muted = true; 
		
	})
	audio_off.addEventListener('click',function(){
		audio_off.style.display = 'none'
		videoyuans.muted = false; 
	})
})