HTML5視頻自動播放不fullPage.js

好工作，所以我嘗試了幾乎一切，和東西在我的代碼阻止HTML5自動播放屬性HTML5視頻自動播放不fullPage.js

這裏是我試過到目前爲止：

- autoplay 

- autoplay="autoplay" 

- $.fn.fullpage({ 
     scrollOverflow: false, 
     afterRender: function(){ 
      $('#video')[0].play();  
     } 
    });

我也嘗試刪除jquery.fullPage.js中的部分代碼，看看是否使它衝突，但它只是阻止我能夠滾動。

/** 
     * Plays video and audio elements. 
     */ 
     function playMedia(destiny){ 
      var panel = getSlideOrSection(destiny); 

      //playing HTML5 media elements 
      panel.find('video, audio').each(function(){ 
       var element = $(this).get(0); 

       if(element.hasAttribute('data-autoplay') && typeof element.play === 'function') { 
        element.play(); 
       } 
      }); 

      //youtube videos 
      panel.find('iframe[src*="youtube.com/embed/"]').each(function(){ 
       var element = $(this).get(0); 

       if (element.hasAttribute('data-autoplay')){ 
        playYoutube(element); 
       } 

       //in case the URL was not loaded yet. On page load we need time for the new URL (with the API string) to load. 
       element.onload = function() { 
        if (element.hasAttribute('data-autoplay')){ 
         playYoutube(element); 
        } 
       }; 
      }); 
     }

這裏是我的HTML

<video id="video" width="100%" height="100%" class="bgvid" style="position: relative; float: left; z-index: 2; opacity: 0.4;" controls muted="muted" autoplay="autoplay"> 
<source src="images/boston.mp4" class="bgvid"> 



</video> 

<div style="position: absolute; z-index: 100; float: left; margin-top: 15%; margin-left: 5%;"> 
    <span class="title"> Web Design and Entertainment </span><br> 
    <span style="font-size: 22px; font-weight: 500; font-family: 'Raleway', sans-serif; color: black;"> right in the heart of Boston. </span> 
<br><br> 
    <hr style="border: 1px solid red;"> 
<br> 
    <span style="font-size: 19px; font-weight: 500; font-family: 'Raleway', sans-serif; color: black;">We're a <span class="red">web design</span>, <span class="red">software engineering</span>, and <br><span class="red">entertainment</span> company to help you grow <br>your business online. </span> 
<br><br><br><br> 
    <a href="ourwork.html" class="workbtn">SEE&nbsp;OUR&nbsp;WORK&nbsp;<i class="fa fa-angle-double-right"></i></a> 

</div>

來源

2016-10-30 Sam Wallace

如果沒有一個完整的工作示例（不只是個自動對sectino /幻燈片休假或不暫停的代碼）真的很難提供幫助。提供一個完整的**工作**例子（你可以使用jsfiddle/codepen/snippet）。 – Dekel

您不必再使用自動播放，甚至使用afterRender回調手動播放。

只需使用data-autoplay，詳見fullPage.js documentation關於嵌入式媒體元素的自動播放。

<audio data-autoplay> 
    <source src="http://metakoncept.hr/horse.ogg" type="audio/ogg"> 
</audio>

這種方式，您也可以決定是否要fullPage.js到（使用data-keepplaying與否）

來源

2016-10-31 11:12:43 Alvaro

HTML5視頻自動播放不fullPage.js

回答

相關問題