Дополнительная кнопка воспроизведения для 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 и начинается видео сразу.

для того чтобы достигнуть этого я создал простую текстовую кнопку для запуска видео 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 не делает ничего еще.

Как это исправить? Есть ли более элегантный способ реализовать дополнительную кнопку?

Answer 1

Моим подходом к этому было бы инициировать игрока и использовать метод load при щелчке. Для этого вам потребуется, чтобы использовать splash screen

Пример

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

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