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

用JS实现视频的静音，可以实现如图按钮所有功能,时间也和视频同步，JS实现。
如图所示，

首先搭个结构

<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; })
})

OK，以上步骤完成，功能即可实现

JavaScript——监听事件：点击鼠标，视频静音（原神官网）相关推荐

JavaScript监听事件
JavaScript怎么设置监听事件? 在HTML的标签中通过事件属性设置,语法"on+事件名='处理函数'": 使用"element.onclick"进行设置 ...
java鼠标监听事件方法_java 鼠标事件监听ActionListener
当鼠标点击和放开时发生动作事件: 方法摘要: 列: public class shijian extends Frame { public static void main(String[] args ...
HQChart使用教程67 - 鼠标点击K线柱子监听事件
HQChart使用教程67 - 鼠标点击K线柱子监听事件点击K线事件步骤 1. 注册监听事件事件回调函数说明参数说明: K线数据说明交流QQ群: 950092318 HQChart代码地址 ...
js常用对象：点击、双击、onload事件、鼠标相关、onblur事件和onfocus事件等；通过循环给多个元素添加事件、通过addEventListener() 方法监听事件函数...
1.通过标签内部添加事件 (1)onclick事件:单击事件 (2)ondbclick事件:双击事件 (3)onload事件:只能在body中使用,入口函数里有:window. .οnlοad=f ...
JavaScript前端监听事件移除案例
学完计算机专业小结一下:如何利用JavaScript解决这样的网课只能在固定界面观看视频观看的问题业务场景场景1.常见如网课听课,不能离开当前的屏幕,同时过一段时间要移动鼠标场景2.如小程序或者 ...
miniui单元格点击弹框_miniui 给表格行添加监听事件的几种方法以及点击某列列名数据不能排序的问题...
最近在使用miniui框架做开发,在做表格行的点击监听事件中发现了几个属性,都可以起到监听效果但是执行的结果却大有不同.好了废话不多说,直接上代码. autoload="true" ...
AWT_addMouseListener鼠标监听事件（Java）
AWT_addMouseListener鼠标监听事件(Java) package reflect;import java.awt.*; import java.awt.event.MouseAdapt ...
maptalks常见操作——图层置顶置底、添加清空图层、添加标注、切换底图、添加缩放工具、事件监听（点击面出弹框）、右键菜单、绘制mark、锁定视角
maptalks常见操作--图层置顶置底.添加清空图层.添加标注.切换底图.添加缩放工具.事件监听(点击面出弹框).右键菜单.绘制mark.锁定视角 1.图层置顶置底 layer.show().br ...
监听当点击微信等app的返回按钮或者浏览器的上一页或后退按钮的事件
在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的需求,那在代码中怎样监听当点击微信.支付宝.百度糯米.百度钱包 ...
jquery 监听td点击事件_React 事件 | 1. React 中的事件委托
说到 React 的事件,也算是 React 的一个非常有亮点的优化,它在原生事件体系的基础上,单独实现了一套事件机制.想要了解这个机制,首先的了解下什么是事件委托以及事件委托的好处. 事件委托假设 ...

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

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

JavaScript——监听事件：点击鼠标，视频静音（原神官网）相关推荐

最新文章

热门文章