HTML5動画を自動再生が

Question

オーケーfullPage.jsで作業していないので、私はほとんどすべてを試してみた、と私のコードで何かがHTML5自動再生属性ここ

を妨げていることは、私がこれまで試したものです：

- 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> 

Answer 1

は、あなたはもう自動再生を使用する必要がある、あるいは手動でそれを再生するafterRenderコールバックを使用していないのです。

fullPage.js documentationに記載されているように、埋め込みメディア要素の自動再生に関してはdata-autoplayを使用してください。

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

この方法であなたはfullPage.jsは完全な作業例がないと