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

Question

这是我第一篇文章。我搜索在这里发现了一个外部.js文件一些有用的代码，几乎工程100％的负载，而不是视频的图像，如果屏幕= < 1024：

$(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函数不起作用。

最佳， 本杰明

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(); 
    });