Question

好吧不确定这是怎么回事。

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

Answer 1

JWPlayer是一个很好的播放器，但你应该将自动启动设置为false并使用JWPlayer Javascript API。

当div弹出时，请使用

[Your player name]().play()

播放视频。例如，您的设置代码以：

开头

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

然后你必须使用

jwplayer().play()

Answer 2

我建议你使用fancybox，这是一个很好的'lightbox'，就像jquery的库一样，非常简单实用......

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

Answer 3

当我们有一些简单的插件时，不用担心，仔细阅读疮代码就可以找到你的东西，这里有一些关于弹出窗口或某种灯箱的加载视频的简单演示。 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。

Answer 4

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

此插件支持大多数JavaScript插件，如jQuery，Mootools等。

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

在div弹出窗口上启动视频 - 在弹出窗口上加载视频

4 个答案: