一，js代码：
<html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<div style="width:50%;height:100%;float:left;margin-left:-0.3px;position: relative;">
<video style="position: absolute; width: 306px; top: 20px; left: 309px; background: #ffffff;"
muted="" autoplay="" playsinline="" webkit-playsinline="" poster="http://file.nihonnoma.net/image/mid/2/2/2094_d941a17bb82e6dc7.jpg"
src="http://file.nihonnoma.net/video/orig/1/35_224a3af35761dfae.mp4" controls="">
</video>
</div>
<script type="text/javascript">
//检查是否全屏
function checkFull(){
let isFullScreen = document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen;
return isFullScreen == undefined ? false : isFullScreen;
}
//设置是否静音
function setMuted() {
//得到页面的视频
let videos = document.getElementsByTagName("video");
console.log(videos);
if (videos.length > 0) {
console.log('有多个视频');
} else {
return;
}
let isFull = checkFull();
if (isFull == true){
let video = videos[0];
//取消静音
console.log("muted:"+video.muted);
if (video.muted == true){
video.muted = false;
}
} else {
let video = videos[0];
//恢复静音
console.log("muted:"+video.muted);
video.muted = true;
}
console.log("监听到窗口变化:是否全屏:"+isFull);
}
//监控窗口变化
window.onresize = function(){
setMuted();
}
</script>
</body>
</html>
说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取： https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明：作者:刘宏缔 邮箱: [email protected]
二，测试效果
视频默认是静音的
全屏时自动取消静音:
三，查看chrome的版本:
标签：console,chrome,107.0,javascript,muted,video,全屏,let,静音 From： https://www.cnblogs.com/architectforest/p/16840659.html