0

我正在使用 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并立即开始播放视频。

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

<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还没有做任何事情。

我怎样才能解决这个问题？有没有更优雅的方式来实现一个额外的按钮？

4

1 回答 1

2

我的方法是启动播放器并在点击时使用加载方法。为此，您需要使用启动画面

例子

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

$('#additional-play').click(function(){
    player.load();
});
于 2013-05-28T09:56:45.290 回答