Question

这是我在这里的第一篇文章。我在这里搜索并找到了一些外部.js文件的有用代码，如果屏幕=＆lt; 1024：

，它几乎可以100％加载图像而不是视频

$(document).ready(function() {

$(window).resize(function(){
            var width = $("body").width();
            if(width <= 1024){
                $("#media_div").html("<img src='/img/benhat1280.jpg' />");
            }else{
                $("#media_div").html('<video src="/img/CT_HQ.mp4" autoplay mute loop />');
                $("#media_div img").css("height","auto");
                $("#media_div").fadeIn(2000);
            }
        })
      });

但是，如果＆gt; 1024，则只会在您调整浏览器窗口大小时加载视频。此外，.fadein功能无效。

最佳，本杰明

Answer 1

只需将调整大小的代码放入函数中，在调整大小时调用它并在启动时调用它。在淡入淡出之前，还要将不透明度添加到0。

$(document).ready(function() {

        function onResize(){
            var width = $("body").width();
            if(width <= 1024){
                $("#media_div").html("<img src='/img/benhat1280.jpg' />");
            }else{          
                $("#media_div").html('<video src="/img/CT_HQ.mp4" autoplay mute loop />');
                $("#media_div img").css("height","auto");
                $("#media_div").css('opacity', 0);
                $("#media_div").fadeIn(2000);
            }
        }

        $(window).resize(function(){
             onResize();
        };

        onResize();
     });

自动播放视频仅适用于调整大小操作

1 个答案: