好吧,不知道这怎么可能。
我有一系列 jquery div 弹出窗口,当每个弹出窗口出现时,我希望它们开始播放视频。
我应该使用哪个播放器以及我应该如何处理这个,已经有了 div,但是因为它们设置为不显示,所以在 JWplayer 中自动播放视频意味着它们在弹出之前正在播放。
<!DOCTYPE html>
<html>
<head>
<style>
div { position: absolute; width: 60px; height: 60px; float: left; display:none; }
.first { background-color: #3f3; left: 0;}
.second { background-color: #33f; left: 80px;}
.third { background-color: #3f3; left: 120px;}
.fourth { background-color: #33f; left: 300px;}
.fifth { background-color: #3f3; left: 400;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
<script src="http://ui.jquery.com/latest/ui/effects.slide.js"></script>
</head>
<body>
<p><button>Run</button></p>
<div class="first">VIDEO 1 HERE</div>
<div class="second">VIDEO 2 HERE</div>
<div class="third">VIDEO 3 HERE</div>
<div class="fourth">VIDEO 4 HERE</div>
<div class="fifth">VIDEO 5 HERE</div>
<script>
$("button").click(function() {
$("div.first").delay(15060).show("puff", {}, 300).delay(116010).fadeOut(300);
$("div.second").delay(40230).show("puff", {},300).delay(28990).fadeOut(300);
$("div.third").delay(46180).show("puff", {},300).delay(27880).fadeOut(300);
$("div.fourth").delay(71070).show("puff", {},300).delay(42050).fadeOut(300);
$("div.fifth").delay(110080).show("puff", {},300).delay(17050).fadeOut(300);
});
</script>
</body>
</html>