gpt4 book ai didi

javascript - HTML5 视频 : autoplay not working in lightbox

转载 作者:行者123 更新时间:2023-12-01 02:51:00 25 4
gpt4 key购买 nike

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

最佳答案

经过几个小时的研究,我找到了一个可以在几分钟内完成所有工作的替代方案。我使用了 afterglow,这是一个 super 容易集成的 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>

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

关于javascript - HTML5 视频 : autoplay not working in lightbox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46977213/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com