Additional Play Button for HTML5 Flowplayer

Question

I am using the latest version (v5.4.1) of the HTML5 Flowplayer and I am trying to add an additional Play button, so that the video will start with a click on the button as well as with a click on the video container.

Therefore I've embedded the video in an overlay like this (which is working fine):

<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>

In addition to the code above there should be an additional button which should also open the #overlay and starts the video right away.

To achive this I've created a simple text button to trigger the video 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>

...but the click on #additional-play doesn't do anything yet.

How can I fix this? Is there a more elegant way to implement an additional button?

Answer 1

My approach to this would be to initiate the player and use the load method on click. To do this you would need to use a splash screen

Example

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

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