Question

无法使用带有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>

Answer 1

最初，我看到的最明显的事情是你正在调用Flowplayer来使用CLASS＆＃34;播放器＆＃34;来初始化A标签上的玩家，但你的A标签是用＆＃编写的？ 34;播放＆＃34;而不是CLASS。

Answer 2

您错过了链接中的＃标志。你需要其中两个。一个是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>

Answer 3

更好的脚本：

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>

怎么做，使用flowplayer的多重叠加视频（jQuery）

3 个答案: