0

好吧,不知道这怎么可能。

我有一系列 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>
4

4 回答 4

1

当我们有一些简单的插件时不用担心,仔细阅读疮代码你可以找到你的东西,这里有一些在弹出窗口或某种灯箱上加载视频的简单演示。http://www.queness.com/post/1229/12-lightboxes-and-javascript-plugins-that-support-video-audio-flash-and-images或者这个http://www.no-margin- for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#prettyPhoto

于 2012-04-17T19:44:07.417 回答
1

JWPlayer 是一个不错的播放器,但您应该将 autostart 设置为 false 并使用 JWPlayer Javascript API。

当 div 弹出时,使用

[Your player name]().play()

播放视频。例如,您的设置代码以:

jwplayer('mediaspace').setup({...
...

然后你必须使用

jwplayer().play()

.

于 2012-04-17T19:00:48.480 回答
1

我建议你使用fancybox,它是一个很好的'lightbox',类似于jquery 库,它非常简单和有用......

链接是: http: //fancybox.net/

于 2012-04-17T19:01:19.177 回答
0

使用 Shadowbox ......它太好了

该插件支持大多数 JavaScript 插件,如 jQuery、Mootools 等。

链接:http ://www.shadowbox-js.com/support.html

于 2012-10-22T10:02:06.173 回答