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();
});

点击后，我也尝试使用超时，但是没有效果。

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

Answer 1

经过几个小时的研究，我找到了一种可以在几分钟内完成所有工作的替代方案。我使用了余辉，这是一个非常容易集成的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视频：自动播放功能无法在灯箱中使用

1 个答案: