Capítulo 3

Vídeo - Exemplo 12, Passo 8

JavaScript

01<script type="text/javascript">
02function init() {    
03var video = document.getElementById('video');
04var slider = document.getElementById('slider');
05var vol = document.getElementById('vol');   
06    slider.addEventListener('change', function(){ 
07        video.volume = this.value;
08        vol.innerHTML = (this.value);   
09    }, false);
10 
11    var btn = document.createElement('button');
12    btn.innerHTML = '&#x25BA;';
13    var secao = document.getElementsByTagName('section')[0];
14    secao.insertBefore(btn, slider); 
15     
16    var btnFF = document.createElement('button');
17    btnFF.innerHTML = '&#x25BA;&#x25BA;';
18    secao.insertBefore(btnFF, slider); 
19 
20    var btnRW = document.createElement('button');
21    btnRW.innerHTML = '&#x25C4;&#x25C4;';
22    secao.insertBefore(btnRW, slider); 
23     
24    var btnSM = document.createElement('button');
25    btnSM.innerHTML = '&#x25BA;&#x2590;';
26    secao.insertBefore(btnSM, slider); 
27    var video = document.getElementById('video');
28    video.removeAttribute('controls');
29    var playPause = function() { 
30        if (video.paused || video.ended){
31            video.play();
32            this.innerHTML = '&#x2588; &#x2588;';
33        }else{
34            video.pause()
35            this.innerHTML = '&#x25B6';
36        }
37    }
38btn.addEventListener('click', playPause, false);
39video.addEventListener('ended', function() {
40    btn.innerHTML = '&#x25B6';
41}, false);
42video.addEventListener('pause', function(){
43btn.innerHTML = '&#x25B6';
44}, false);
45video.addEventListener('play', function(){
46btn.innerHTML = '&#x2588; &#x2588;';
47}, false);
48btnFF.addEventListener('click', function(){
49    video.play();
50    video.playbackRate = 3;
51}, false);
52btnRW.addEventListener('click', function(){
53    video.play();
54    video.playbackRate = -20;
55}, false);
56btnSM.addEventListener('click', function(){
57    video.play();
58    video.playbackRate = 0.3;
59}, false);
60var progress = document.getElementsByTagName('progress')[0];
61var pp = document.getElementById('pp');
62    function atualizar() {
63        progress.setAttribute('max', video.duration);
64        var cT = video.currentTime;
65        progress.value = cT;
66        var porcentagem = cT/video.duration * 100;
67    if(parseInt(porcentagem%2) == 0) {
68        pp.textContent = parseInt(porcentagem);
69    if(porcentagem == 100) {clearInterval(atualizar)}
70    }
71}
72setInterval(atualizar, 300);
73}
74window.onload = init;       
75        

HTML

01    <video poster="capa.jpg" controls id="video" width="400">
02        <source src="video.ogv" type="video/ogg">
03        <source src="video.mp4" type="video/mp4">
04        <source src="video.webm" type="video/webm">
05        <!-- Código (X)HTML para inserção de video com Flash -->
06        <p>Seu navegador não suporta o elemento video da HTML5.<br>Faça <a href="video.mp4">download do video</a></p>
07    </video>      
08<input type="range" min="0" max="1" value="1" step="0.1" id="slider" />
09<span id="vol">1</span>
10    