Как сделать, несколько оверлейных видео с использованием flowplayer (jQuery) - PullRequest
Новая
       19

Как сделать, несколько оверлейных видео с использованием flowplayer (jQuery)

1 голос
/ 09 декабря 2011

Невозможно сделать несколько наложенных видео с помощью flowplayer с jQuery

Я сделал одно наложенное видео, но не получаю результат, когда пытаюсь сделать несколько наложений, я думаю, что могут быть проблемы со скриптом, и я нене знаю jQuery, пожалуйста, помогите мне

Мой код 

     <style>

    .overlay {
     background:url(white.png) no-repeat;
     padding:40px;
     width:576px;
     display:none;
     }

    .close {
     background:url(close.png) no-repeat;
     position:absolute;
     top:2px;
     display:block;
      right:5px;
      width:35px;
      height:35px;
      cursor:pointer;
     }

     a.player  {
     display:block;
     height:450px;
      } 

      </style>

       <script>

    $(function() 
     {

    //setup overlay actions to anchors
    $("a[rel]").overlay({

    // use the Apple effect for overlay
    effect: 'apple',
     expose: '#789',
     onLoad: function(content) {

    // find the player contained inside this overlay and load it
     this.getOverlay().find("a.player").flowplayer(0).load();

     },
    onClose: function(content) {
    $f().unload();
    }
     });

    // install flowplayers
    $("a.player").flowplayer("http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf");
    });

  </script>

     <body>

    <p>

    <a rel="overlay1" href="#">
<img src="image1.png" />
 </a>

     <a rel="overlay2" href="#">
<img src="image2.png"/>
 </a>

     <a rel="overlay3" href="#">
<img src="image3.png" />
 </a>

     <a rel="overlay4" href="#">
<img src="image4.png"/>
 </a>

     </p>

     </body>

    <div id="overlay1" class="overlay" style="background-image:url('white.png')">
 <a id="player" href="video.mp4">
&nbsp;
</a>
</div>

     <div id="overlay2" class="overlay" style="background-image:url('white.png')">
     <a id="player" href="video.mp4">
 &nbsp;
 </a>
 </div>

     <div id="overlay3" class="overlay" style="background-image:url('white.png')">
     <a id="player" href="video.mp4">
 &nbsp;
 </a>
 </div>

     <div id="overlay4" class="overlay" style="background-image:url('white.png')">
     <a id="player" href="video.mp4">
 &nbsp;
 </a>
 </div>

Ответы [ 3 ]

0 голосов
/ 17 февраля 2012

Вам не хватает знака # в ваших ссылках.Вам нужно два из них.Одно существо href="#", которое у вас есть, другое существо rel="#overlay1", которого у вас нет.Например: 

<a rel="#overlay1" href="#">Video 1</a>

<a rel="#overlay2" href="#">Video 2</a>

<a rel="#overlay3" href="#">Video 3</a>

<a rel="#overlay4" href="#">Video 4</a>
0 голосов
/ 30 декабря 2012

Лучший скрипт для этого:

CSS 

<style type="text/css">
/* <![CDATA[ */
    #overlay {
      display: none;
      padding: 70px;
      width: 512px;
      background-image:url(http://flowplayer.org/media/img/overlay/white.png);
    }
    .close {
     background:url(http://flowplayer.org/media/img/overlay/close.png) no-repeat;
      position:absolute;
      top:2px;
      right:5px; 
      display:block;
      width:35px;
      height:35px;
      cursor:pointer;
    }
    #player {
      display: block;
      width: 512px;
      height: 384px;
      margin: 0;
    }
    #player *:focus {
      outline-style: none;
    }
  /* ]]> */
  </style>

JAVASCRIPT 

<script type="text/javascript">
// <![CDATA[
  $(function () {
    var player = $f("player", "/flowplayer-3.2.15.swf", {
      clip: {
        baseUrl: "http://media.blacktrash.org",
        scaling: "fit"
      }
    });

    $("a[rel]").overlay({
      mask: {
        color: '#000',
        opacity: 0.2
      },
      onLoad: function () {
        player.play(this.getTrigger().attr("href"));
      },
      onClose: function () {
        player.unload();
      }
    });
  });
  // ]]>
  </script>

HTML 

<ul>
    <li><a rel="#overlay" href="ccc_trailer1.mp4">Video 1</a></li>

    <li><a rel="#overlay" href="ccc_trailer2.mp4">Video 2</a></li>

    <li><a rel="#overlay" href="ccc.mp4">Video 3</a></li>

    <li><a rel="#overlay" href="stsp.mp4">Video 4</a></li>

    <li><a rel="#overlay" href="manstalt.mp4">Video 5</a></li>
  </ul>

  <div id="overlay">
    <a class="close"></a>

    <div id="player">&nbsp;</div>
  </div>
0 голосов
/ 30 декабря 2011

Изначально самое очевидное, что я вижу, это то, что вы вызываете Flowplayer для инициализации игроков на тегах A с КЛАССОМ «player», но ваши теги A пишутся с идентификаторами «player», а не с CLASSes.

...