Capítulo 3
Vídeo - Exemplo 10
JavaScript
<script type="text/javascript">
function init() {
var video = document.getElementById('video');
var btn = document.getElementsByTagName('button');
btn[0].onclick = function() {
video.poster = '';
}
btn[1].onclick = function() {
video.poster = 'capa.jpg';
}
btn[2].onclick = function() {
alert('Largura do vídeo: '+video.width+'px');
}
btn[3].onclick = function() {
video.width = video.width*1.2;
}
btn[4].onclick = function() {
video.width = '400';
}
btn[5].onclick = function() {
alert('Nível de volume do áudio (0-1): '+video.volume);
}
btn[6].onclick = function() {
if (video.paused) {
alert('O vídeo está em Pausa');
}else if (video.ended) {
alert('Terminou a execução do vídeo');
}else{
alert('O vídeo está rodando');
}
}
btn[7].onclick = function() {
var atr = 'Os atributos do elemento vídeo são: \n';
if(video.currentSrc) atr += 'src\n';
if(video.controls) atr += 'controls\n';
if(video.autoplay) atr += 'autoplay\n';
if(video.loop) atr += 'loop\n';
if(video.poster) atr += 'poster\n';
if(video.id) atr += 'id\n';
if(video.width) atr += 'width\n';
if(video.height) atr += 'height\n';
alert(atr);
}
btn[8].onclick = function() {
alert('A duração do video é de: '+video.duration+'segundos');
}
btn[9].onclick = function() {
alert('O tempo de execução no click foi de: '+video.currentTime+' segundos');
}
}
window.onload = init;
</script >
HTML
<video poster="capa.jpg" controls id="video">
<source src="video.ogv" type="video/ogg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<!-- Código (X)HTML para inserção de video com Flash -->
<p>Seu navegador não suporta o elemento video da HTML5.<br>Faça <a href="video.mp4">download do video</a></p>
</video>
<aside>
<button type="button">Retirar capa</button>
<button type="button">Recolocar capa</button>
<button type="button">Largura do vídeo?</button><br>
<button type="button">Aumentar dimensões</button>
<button type="button">Dimensões default</button>
<button type="button">Volume?</button><br>
<button type="button">Vídeo?</button>
<button type="button">Atributos?</button>
<button type="button">OK</button>
</aside>