如何使用flowplayer（jQuery）创建多个重叠视频_Jquery_Video_Overlay_Flowplayer

如何使用flowplayer（jQuery）创建多个重叠视频

jquery video

如何使用flowplayer（jQuery）创建多个重叠视频,jquery,video,overlay,flowplayer,Jquery,Video,Overlay,Flowplayer,无法使用带有jQuery的flowplayer制作多个重叠视频我做了一个叠加视频，但当我尝试做多个叠加时并没有得到结果我认为脚本可能有问题，我不知道jQuery，请帮助我我的代码是 <style> .overlay { background:url(white.png) no-repeat; padding:40px; width:576px; display:none; } .close {

无法使用带有jQuery的flowplayer制作多个重叠视频

我做了一个叠加视频，但当我尝试做多个叠加时并没有得到结果我认为脚本可能有问题，我不知道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>


.覆盖{
背景：url（white.png）不重复；
填充：40px；
宽度：576px；
显示：无；
}
.结束{
背景：url（close.png）不重复；
位置：绝对位置；
顶部：2个；
显示：块；
右：5px；
宽度：35px；
高度：35px；
光标：指针；
}
a、 玩家{
显示：块；
高度：450px；
} 
$（函数（）
{
//设置锚定的覆盖操作
$（“a[rel]”）。覆盖({
//使用苹果效果进行叠加
效果：“苹果”，
曝光：“#789”，
onLoad：函数（内容）{
//找到包含在此覆盖中的玩家并加载它
this.getOverlay（）.find（“a.player”）.flowplayer（0.load（）；
},
onClose：函数（内容）{
$f（）.unload（）；
}
});
//安装FlowPlayer
$（“a.player”）.flowplayer（“http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf");
});

一开始，我看到的最明显的事情是，你调用Flowplayer来初始化带有“player”类的标签上的玩家，但是你的A标签是用“player”ID而不是类来编写的。

你的链接中缺少了符号。你需要两个。一个是

href=“#”

——你有，另一个是

rel=“#overla1”

——你没有。例如：

<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>

更好的脚本：

CSS


/*  */

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

<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>

<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>