HTML5 视频：自动播放在灯箱中不起作用答案

【问题标题】：HTML5 Video: autoplay not working in lightboxHTML5 视频：自动播放在灯箱中不起作用
【发布时间】：2017-10-27 14:18:34
【问题描述】：

我正在使用 html5 视频标签在灯箱中显示视频。视频本身运行良好。但是当有人打开灯箱时我尝试自动播放它时我失败了。这是我正在使用的 javascript 代码。

用于触发灯箱的 HTML 工作正常。

<a href="#" class="btn btn-blue lightbox btnlb">Watch the full video</a>

视频标签的 HTML 也可以正常工作。

<video id="lbvideo" width="960" height="540">
    <source src="<?php bloginfo('template_directory'); ?>/videos/pinkgirl.mp4" type="video/mp4">
    <source src="<?php bloginfo('template_directory'); ?>/videos/pinkgirl.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
</video>

点击灯箱自动播放视频的Javascript代码。没有按预期工作。

$(".btnlb").click(function(e){
        var myVideo = document.getElementById("lbvideo"); 
        myVideo.play();
});

我也尝试过在点击后使用超时，但这不起作用。

$(".btnlb").click(function(e){
        setTimeout(function() {
        var myVideo = document.getElementById("lbvideo"); 
        myVideo.play();
        console.log(myVideo);
        }, 5000);
});

【问题讨论】：

标签： javascript jquery html html5-video lightbox

【解决方案1】：

在为此工作了几个小时后，我找到了一个可以在几分钟内完成所有工作的替代方案。我使用了 afterglow，它是一个超级容易集成的 HTML5 视频播放器。通过这个简单的设置，我一切就绪，看起来非常好。

<!DOCTYPE html>
<html>
  <head>
    <title>afterglow player</title>
    <script src="//cdn.jsdelivr.net/npm/afterglowplayer@1.x"></script>
  </head>
  <body>
    <a class="afterglow" href="#myvideo">Launch lightbox</a>
    <video id="myvideo" width="960" height="540">
      <source type="video/mp4" src="/path/to/myvideo.mp4" />
    </video>
  </body>
<html>

分享以防万一它帮助别人并节省他们一些时间。快乐编码。 :)

【讨论】：