javascript - 具有多个叠加层和图像按钮的 Flowplayer

Question

嗨，我遇到了问题 flowplayer overlays 。我有多个带有图像按钮的叠加层。叠加层“弹出”，但流程播放器未加载。如果您能发现我的代码中的错误，我们将不胜感激。

<script>

$(function() {

// setup overlay actions to buttons
$("button[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://www.bazookatag.com/flowplayer-3.2.7.swf"); 
}); 
</script>

<p>
<div>
<div style="float:left; width: 400px; height: 325px; padding-left: 20px;">
        <button rel="#overlay1"><img src="images/playersplash.png" width="355" height="301" />
        </button> 
</div> 

    <div style="float:left; width: 500px; height: 325px;"><h2>Stars</h2></div>
    </div> 

<div>
    <div style="float:left; width: 500px; height: 325px; padding-left: 25px;">    <h2>Domed</h2></div>
    <div style="float:right; width: 400px; height: 325px;">
         <button rel="#overlay2"><img src="images/playersplash.png" width="355" height="301" /></button> 
    </div>
    </div>

    <div>
    <div style="float:left; width: 400px; height: 325px; padding-left: 20px;">
    <button rel="#overlay3"><img src="images/playersplash.png" width="355" height="301" /></button> 
</div> 
    <div style="float:left; width: 500px; height: 325px;"><h2>Viral 4</h2></div>
    </div> 

<div>
    <div style="float:left; width: 500px; height: 325px; padding-left: 25px;"><h2>Viral 5</h2></div>
    <div style="float:right; width: 400px; height: 325px;">
        <button rel="#overlay4"><img src="images/playersplash.png" width="355" height="301" /></button> 
    </div>
    </div>
</p>

<!-- overlays for both videos -->
<div class="overlay" id="overlay1">
<a class="player" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv">
    &nbsp;
</a>
</div>

<div class="overlay" id="overlay2">
<a class="player" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv">
    &nbsp;
</a>    
</div>

<div class="overlay" id="overlay3">
<a class="player" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv">
    &nbsp;
</a>
</div>

<div class="overlay" id="overlay4">
<a class="player" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv">
    &nbsp;
</a>    
</div>

Answer 1

在覆盖之前安装播放器:

    // install flowplayers

    $("a.player").flowplayer("http://www.bazookatag.com/flowplayer-3.2.7.swf"); 
    }); 

// setup overlay actions to buttons

    $("button[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();
    }
});