0

これがどのように可能かわからない。

一連のjquerydivポップアップがあります。それぞれが表示されたら、ビデオの再生を開始してもらいます。

どのプレーヤーを使用し、どのようにアプローチすればよいですか。すでに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

ファンシーボックスを使用することをお勧めします。これは、jquery 用の素敵な「ライトボックス」のようなライブラリで、非常にシンプルで便利です...

リンクは: http://fancybox.net/

于 2012-04-17T19:01:19.177 に答える
0

Shadowboxを使用してください...それは良すぎます

このプラグインは、jQuery、MootoolsなどのほとんどのJavaScriptプラグインをサポートしています。

リンク： http： //www.shadowbox-js.com/support.html

于 2012-10-22T10:02:06.173 に答える