HTML5 Flowplayer的附加播放按钮

Question

我正在使用HTML5 Flowplayer的最新版本（v5.4.1），我正在尝试添加一个额外的“播放”按钮，以便点击按钮以及点击视频即可开始播放视频容器

因此我将视频嵌入到这样的叠加层中（工作正常）：

<div id="overlay">
    <div id="is-finished-demo" class="flowplayer is-splash is-closeable color-alt" data-swf="js/flowplayer.swf">
        <video preload='none'>
             <source type="video/mp4" src="media/video.mp4" />
             <source type="video/ogg" src="media/video.ogv" />
             <source type="video/webm" src="media/video.webm" />
        </video>

        <div class="when-video-ends">
            <a class="fp-toggle">
                <div class="play-this-again"></div>
            </a>
        </div>
    </div>
</div>

<script>
$('#overlay .flowplayer').bind('ready unload', function(e) {
    $(this).parent().toggleClass('is-active', e.type == 'ready');
});

$('.flowplayer').flowplayer({
    tooltip: false, 
    native_fullscreen: true
});
</script>

除了上面的代码之外，还应该有一个额外的按钮，它也应该打开#overlay并立即启动视频。

为了实现这一点，我创建了一个简单的文本按钮来触发视频点击：

<div id="additional-play">
    <span>Play</span>
</div>

<script>
$('#additional-play').click(function () {
    $('#overlay .flowplayer').bind('ready unload', function(e) {
        $(this).parent().toggleClass('is-active', e.type == 'ready');
    });

    $('.flowplayer').flowplayer({
        tooltip: false, 
        native_fullscreen: true
    });
});
</script>

...但是点击#additional-play还没有做任何事情。

我该如何解决这个问题？是否有更优雅的方式来实现额外的按钮？

Answer 1

我的方法是启动播放器并在点击时使用load方法。为此，您需要使用splash screen

示例

var player = $('.flowplayer').flowplayer({
    tooltip: false,
    native_fullscreen: true,
    splash: true
});

$('#additional-play').click(function(){
    player.load();
});