Question

我想在fancybox3上打开HTML5视频后自动播放。

这是我的代码： 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

为您的视频指定一个ID（myVideo），并在afterShow函数中添加此行

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

Javascript

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

使用Fancybox3自动播放HTML5视频

1 个答案: