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();
    }
});

Flowplayer有多个叠加和图像按钮

1 个答案: