Fancybox3を使用した自動再生HTML5ビデオ

Question

fancybox3でHTML5ビデオを開いた後に自動再生したい。ここ

は私のcodepenです： https://codepen.io/ableslayer/pen/aygGQX

と私のコード：

$(document).ready(function() { 
    $("[data-fancybox]").fancybox({ 
     afterShow: function() { 
     // After the show-slide-animation has ended - play the vide in the current slide 
     this.content.find('video').trigger('play') 

     // Attach the ended callback to trigger the fancybox.next() once the video has ended. 
     this.content.find('video').on('ended', function() { 
      $.fancybox.next(); 
     }); 
     } 
    }); 
    }); 

Answer 1

Javascriptをあなたの動画ID（myVideo）を付けて、

var vid = document.getElementById("myVideo"); 
vid.play(); 

afterShow機能で、この行を追加します。

$(document).ready(function() { 
    $("[data-fancybox]").fancybox({ 
     afterShow: function() { 
     // After the show-slide-animation has ended - play the vide in the current slide 
     var vid = document.getElementById("myVideo"); 
     vid.play(); 

     // Attach the ended callback to trigger the fancybox.next() once the video has ended. 
     this.content.find('video').on('ended', function() { 
      $.fancybox.next(); 
     }); 
     } 
    }); 
    }); 

HTML

<a data-fancybox data-src="#one" class="fancybox">link</a> 
<div id="one" style="display:none"> 
    <video id='myVideo' width="400" controls autoplay> 
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">   
    Your browser does not support HTML5 video. 
    </video> 
</div>