我正在使用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);
});
经过几个小时的研究，我发现了一种可以在几分钟内完成所有工作的替代方案。我使用了余辉，这是一个非常容易集成的HTML5视频播放器。通过这个简单的设置，我已经设置好了，它看起来非常好。
<!DOCTYPE html>
<html>
<head>
<title>afterglow player</title>
<script src="//cdn.jsdelivr.net/npm/[email protected]"></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>
分享，以防它帮助别人并节省一些时间。快乐的编码。 :)