谁能告诉我如何让视频在特定的屏幕尺寸宽度下静音:
<div class="fullscreen-bg">
<video loop autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
<source src="vid/Marbella%20Triathlon%20Start-HD.mp4" type="video/mp4">
</video>
</div>
@media (max-width: 767px) {
.fullscreen-bg {
background: url('../img/brownlee.jpg') center center / cover no-repeat;
background-position: 40% 0%;
}
.fullscreen-bg__video {
display: none;
}
}
我在下面找到这段代码,对它做了一些小改动,但我对编码还很陌生,不知道如何应用它,以及它是否正确:
<script>
$(fucntion() {
if(document.body.clientWidth >= 767) {
$('video').attr('muted', false);
}
$(window).resize(function() {
if(document.body.clientWidth <= 767) {
$('video').attr('muted', true);
}
});
});
</script>
最佳答案
<script>
(function() {
'use strict';
var videos = document.querySelectorAll('video.mute-on-resize');//get all video tags with class="mute-on-resize". You can replace it any other CSS selector.
var length = videos.length;//get total number of tags
if (length === 0) {//check if total is 0
return;
}
function toggleMute(e) {//function to change mute of all videos
for (var i = 0; i < length; i++) {
videos[i].muted = e;
}
};
function resizeHandle() {//function to check size
toggleMute(innerWidth >= 767);
};
addEventListener('resize', resizeHandle);//run function when window resizes
resizeHandle();//run function once on load
})();
</script>
在 body 标签的末尾添加此脚本标签。将“调整大小静音”类添加到您想要静音的任何视频,尺寸为 767 或更大。
关于html - 应用媒体查询时视频静音,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35971906/