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

【问题标题】：Autoplay video only working on resize action自动播放视频仅适用于调整大小操作
【发布时间】：2017-08-08 17:36:18
【问题描述】：

这是我在这里的第一篇文章。我在这里搜索并找到了一些用于外部 .js 文件的有用代码，如果 screen = ，它几乎可以 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，它只会在您调整浏览器窗口大小时加载视频。此外，.fadein 功能也不起作用。

最好，本杰明

【问题讨论】：

您能给我们提供一个问题的例子吗？也许像JSFiddle 这样创建一个Minimal, Complete, and Verifiable example。

标签： jquery css video fadein autoload

【解决方案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();
     });

【讨论】：