怎麼辦，用的Flowplayer（jQuery的）多重疊加視頻

無法使用做多的Flowplayer視頻疊加使用jQuery怎麼辦，用的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>

來源

2011-12-09 FreshBits

您錯過了＃登錄您的鏈接。你需要兩個。一個是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>

來源

2012-02-17 16:13:20

起初，我看到的最明顯的一點就是，我們在調用的Flowplayer初始化玩家在A類標籤上播放「playe r「，但你的A標籤是用」player「而不是CLASSes的ID編寫的。

來源

2011-12-29 20:13:13 patrickhawley

更好的劇本了這一點：

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>

來源

2012-12-29 22:57:36 Florin

怎麼辦，用的Flowplayer（jQuery的）多重疊加視頻

回答

相關問題