Как сделать DIV видимым поверх полноэкранного видео HTML5?
Моя конечная цель сейчас - сделать так, чтобы ссылка появлялась в верхней части видео, когда видео подошло к концу. Используя функциональность JW Players, я определил, как сделать ссылку доступной после завершения видео, но только в стандартном виде. Если пользователь просматривает видео в полноэкранном режиме, ссылка не отображается. Я много читал и понимаю, что, когда он находится в полноэкранном режиме, видео находится во флэш-памяти, и я не могу переопределить функции флэш-памяти, не интегрировав ссылку в файл SWF, чего я не хочу делать.
Что я сделал, так это удалил полноэкранную кнопку в видеоплеере JW Player с помощью скина. Затем я создал кнопку для отображения видео в полноэкранном режиме, используя полноэкранный режим HTML5. (Я понимаю, что IE не будет работать с этим ... это нормально сейчас). Я также могу создать полноэкранный прослушиватель событий изменения состояния, чтобы моя ссылка отображалась в верхней части видео. Но это не работает.
Независимо от того, как я оформляю DIV, который содержит ссылку, он не появляется в верхней части видео.
Может ли кто-нибудь указать мне правильное направление?
Спасибо за любую помощь, которую любой может мне дать.
Пример кода:
#container{
position:relative;
z-index:0;
}
#overlay {
visibility:hidden;
width: 700px;
height:50px;
color:#FFF;
position: absolute;
top: 532px;
margin:8px;
padding:5px;
background-color:#000;
text-align:center;
}
#overlayfullscreen{
visibility:hidden;
text-align:center;
color:#FFF;
font-size:26px;
z-index: 1000;
position: absolute;
top: 800px;
margin:8px;
padding:5px;
overlay:hidden;
}
<div id="container">
Loading the player, if not working please update your browser.
</div>
<button onClick="goFullscreen('container'); return false">Click for Fullscreen</button>
var path = '<?php echo $video_path ?>';
jwplayer("container").setup(
{
autostart: <?php echo $autostart ?>,
file: "<?php echo $full_video_path ?>",
height: <?php echo $height ?>,
width: <?php echo $width ?>,
skin: '<?php echo $skin ?>',
events: {
onComplete: function(){
document.getElementById('overlay').style.visibility = 'visible';
}
}
});
document.addEventListener("mozfullscreenchange", function ()
{
document.getElementById('overlayfullscreen').style.visibility = 'visible';
}, false);