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

嗨，我在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>

最佳答案

安装播放器，然后覆盖：

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

关于javascript - 具有多个叠加层和图像按钮的Flowplayer，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9713304/