自動播放視頻僅適用於調整大小動作

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