Aparentemente para que um vídeo fique em fullscreen é preciso que haja a interação com usuário. A maioria dos players, incluindo o nativo HTML5 tem botão 'fullscreen'.
Estou construindo uma plataforma interativa offline, e preciso que ao clicar num botão (teaser), automaticamente abra um player reproduzindo um vídeo em fullscreen e que ao término permaneça na ou volte para a tela que estava:
Pensei nessas duas soluções, que estão dentro da minha atual capacidade de programação:
1) Criar outra página HTML com o seguintes códigos:
<body class="fadein">
<video id=video autobuffer autoplay="true">
<source src="media_v/video.mp4">
<object type="video/mp4" data="media_v/video.mp4" width="1366"
height="768">
</object>
</video>
<script>
document.getElementById('video').addEventListener('ended',myHandler,false);
function myHandler(e) {
window.location.href = "menu_option.html";
}
</script>
Acontece que nesse modo ele não toma toda a tela, mesmo com as medidas tendo a resolução nativa da tela 1366x768, ele deixa uma bordinha e não consigo por o objeto em tela toda sem que o usuário clique no botão fullscreen, nem mesmo usando:
<script>
var elem = document.getElementById("video");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
</script>
ou
video id=video autobuffer autoplay="true" fullscreen="true"
Existe "fullscreen='true'"?
2) A outra forma que pensei foi que ao clicar no 'botão' já abra um vídeo 'como sobreposição ao conteúdo' em modo fullscreen, como o player do Facebook, mas nesse caso acho que não sei nem por onde começar, por isso cá estou.