Capítulo 3

Vídeo - Exemplo 12, Passo 6

1

JavaScript

<script type="text/javascript">
function init() {	 
var video = document.getElementById('video');
var slider = document.getElementById('slider');
var vol = document.getElementById('vol');	
	slider.addEventListener('change', function(){ 
		video.volume = this.value;
		vol.innerHTML = (this.value);	
	}, false);

	var btn = document.createElement('button');
	btn.innerHTML = '&#x25B6';
	var secao = document.getElementsByTagName('section')[0];
	secao.insertBefore(btn, slider); 

	var video = document.getElementById('video');
	video.removeAttribute('controls');
	var playPause = function() { 
		if (video.paused || video.ended){
			video.play();
			this.innerHTML = '&#x2588; &#x2588;';
		}else{
			video.pause()
			this.innerHTML = '&#x25B6';
		}
	}
btn.addEventListener('click', playPause, false);
video.addEventListener('ended', function() {
	btn.innerHTML = '&#x25B6';
}, false);
video.addEventListener('pause', function(){
btn.innerHTML = '&#x25B6';
}, false);
video.addEventListener('play', function(){
btn.innerHTML = '&#x2588; &#x2588;';
}, false);
}
window.onload = init;
</script >		
		

HTML

	<video poster="capa.jpg" controls id="video" width="400">
		<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>		
<input type="range" min="0" max="1" value="1" step="0.1" id="slider" />
<span id="vol">1</span>