现象描述,
默认进入页面中,视频是静音播放,使用了muted。
<video controls autoplay muted loop style="width:500px;" controlslist="noplaybackrate">
<source src="media/open.mp4">
<source src="media/open.webm">
<p>
对不起,你的浏览器不支持video元素,请点击这里下载最新版本的浏览器
</p>
</video>
同时我注册了鼠标滚动事件,具体是做一个吸顶的操作,反正与视频无关。
结果将视频音量放出来之后,
1.滚动鼠标,视频会自动静音。
2.点击tabs切换内容时,上面的video中视频也会静音,真是诡异啊。。。。折腾了大半天!
解决方案:
1.在video标签中不要写muted
2.通过操作dom赋值
<video controls autoplay loop style="width:500px;" controlslist="noplaybackrate" id="video">
<source src="media/open.mp4">
<source src="media/open.webm">
<p>
对不起,你的浏览器不支持video元素,请点击这里下载最新版本的浏览器
</p>
</video>
let ele = document.querySelector('.className');
if(ele){
ele.muted = true;
}
应该是这些事件自动触发了video的muted属性