2017-02-27 22 views
2

我將此視頻作爲Bootstrap的背景,希望在頁面加載時自動播放。它適用於臺式機Chrome,但不適用於移動設備。爲什麼我無法將此視頻自動從網頁加載到移動設備上啓動?

這是使用創建了一個小型,.mp4檔案:

<video class="video-fluid" id="video1" autoplay loop> 
    <source src="videos/light-swaying.mp4" type="video/mp4" /> 
</video> 

,顯示了在移動設備上的唯一的事情就是一個第一幀的還是,不是移動視頻。我在我的身體底部添加了這個腳本,它實際上啓動了視頻。它循環和一切:

<script type="text/javascript"> 
    var video = document.getElementById('video1'); 
    var aboveView = document.getElementById('video-carousel-example2'); 
    aboveView.addEventListener('click', function() { 
     video.autoplay = true; 
     video.play(); 
    }, false); 
</script> 

唯一的問題是,但我必須點擊視頻才能真正啓動它。我想這個腳本在同一地點,並沒有任何運氣:

<script type="text/javascript"> 
    var video1 = document.getElementById('video1'); 
    video1.autoplay = true; 
    video1.play(); 
</script> 

因此,沒有人有任何想法如何解決這一問題,並使其自動播放?

回答

1

哪個版本的Chrome?因爲: 「以前的Android版Chrome瀏覽器已禁用自動播放功能,因爲它可能會造成破壞性,數據量大並且很多用戶不喜歡它。」

來源: https://developers.google.com/web/updates/2016/07/autoplay

+1

非常感謝你,我剛剛添加了從文章和繁榮中讀取的'muted'標籤,它會自動播放! –

1

主要是我們太發現在ipad這個問題和平板電腦,因爲iPad和平板電腦犯規支持自動播放

要查看這些限制的完整列表,請參閱官方文檔:https://webkit.org/blog/6784/new-video-policies-for-ios/

因爲你需要通過檢查你的顯示器分辨率來觸發你的點擊功能我不熟悉javascript,所以我寫這個使用jquery

 $(document).ready(function(){ 
     var screenWidth = $(window).width(); 
     if(screenWidth <= 1024)//just i am checking for ipad only 
     { 
      $('#video-carousel-example2).trigger('click'); 
     } 
    $('#video-carousel-example2).click(function(){ 
      var video1 = document.getElementById('video1'); 
      video1.play(); 
     }) 
    }); 
相關問題