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

Question

这是我第一次 post 来这里。我在这里搜索并找到了一些用于外部 .js 文件的有用代码，如果屏幕 = <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);
            }
        })
      });

但是，如果 >1024，它只会在您要调整浏览器大小时加载视频 window。另外，.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();
     });

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

Autoplay video only working on resize action

css

video

jquery

autoload

fadein