使用 Fancybox3 自动播放 HTML5 个视频

Question

我想在 fancybox 3 上打开 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 个视频

Autoplay HTML5 video with Fancybox3

html

video

fancybox