Дополнительная кнопка воспроизведения для HTML5 Flowplayer

Question

Я использую последнюю версию (v5.4.1) HTML5 Flowplayer и пытаюсь добавить дополнительную кнопку "Воспроизведение", чтобы видео началось как с нажатия на кнопку, так и с щелчком по контейнеру видео.

Поэтому я встроил видео в оверлей вроде этого (который работает нормально):

<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

Мой подход заключается в том, чтобы запустить плеер и использовать метод загрузки по клику. Для этого вам нужно будет использовать заставку

пример

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

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