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标记的末尾添加此脚本标记。添加课程＆＃34;静音调整大小＆＃34;任何你想要静音的视频都是767或更多。

应用媒体查询时视频静音

1 个答案: