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

Question

我正在使用 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();
});

我也试过在点击后使用timeout，但是没有用。

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

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

分享以防对其他人有帮助并节省他们一些时间。快乐编码。 :)

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

HTML5 Video: autoplay not working in lightbox

html

javascript

jquery

lightbox

html5-video