html - 应用媒体查询时视频静音

Question

谁能告诉我如何让视频在特定的屏幕尺寸宽度下静音:

<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>

Answer 1

<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 或更大。