unrealmanel Posted July 12, 2012 Report Share Posted July 12, 2012 (edited) Boa tarde, sou iniciante em java, e estou aqui com um problema, tenho o player funcionando e a escolha dos videos também, eis o meu problema, o botão de "Prev & Next" não consigo por a mudar de video :/ Eis o meu Código : <!DOCTYPE html> <html> <head> <title>HTML 5 - Video Player</title> <style type="text/css"> body { font-family: Arial; text-align: center; } video, #play, #stop, #rew, #fwd, #next, #prev, #sound, #volUp, #volDown { cursor: pointer; } div.section { margin-bottom: 18px; } select { border: 1px solid #404040; width: 600px; height: 20px; } </style> </head> <body> <div class="section"> <video width="600" height="400" poster="images/poster.jpg" controls = ""></video> <br /> <select id="videoList" size="1" onchange="javascript:loadVideo(this.options[this.selectedIndex].value);"> <option value="videos/7.mp4">Avioes</option> <option value="videos/BigBuck.webm">BigBuck</option> <option value="videos/iceage.mov">IceAge</option> </select> </div> <div class="section"> <span id="currentTime"></span> / <span id="duration"></span> </div> <div class="section"> <span id="play"></span> <span id="stop"></span> <span> </span> <span> </span> <span id="rew" onclick="skipVideo(-5)"></span> <span id="fwd" onclick="skipVideo(5)"></span> <span> </span> <span> </span> <span id="prev"></span> <span id="next"></span> <span> </span> <span> </span> <span id="sound"></span> </div> <div class="section"> <span id="volUp"></span> [<span id="volume"></span>] <span id="volDown"></span> </div> <div class="section"></div> <script type="text/javascript"> // variáveis globais var videoList = document.getElementById('videoList'); var video = document.getElementsByTagName('video')[0]; var play = document.getElementById('play'); var stop = document.getElementById('stop'); var next = document.getElementById('next'); var prev = document.getElementById('prev'); var rew = document.getElementById('rew'); var fwd = document.getElementById('fwd'); var sound = document.getElementById('sound'); var currentTime = document.getElementById('currentTime'); var duration = document.getElementById('duration'); var volume = document.getElementById('volume'); var volUp = document.getElementById('volUp'); var volDown = document.getElementById('volDown'); // formato do tempo para apresentar estaticamente var timeFormat = '00:00'; // Imagens para os controls var imgPlay = '<img src="images/play.png" title="Play" />'; var imgPause = '<img src="images/pause.png" title="Pause" />'; var imgStop = '<img src="images/stop.png" title="Stop" />'; var imgMute = '<img src="images/mute.png" title="Volume On" />'; var imgUnMute = '<img src="images/unmute.png" title="Volume Off" />'; var imgNext = '<img src="images/next.png" title="Next" />'; var imgPrev = '<img src="images/prev.png" title="Prev" />'; var imgRew = '<img src="images/rew.png" title="Backward" />'; var imgFwd = '<img src="images/fwd.png" title="Forward" />'; var imgVolUp = '<img src="images/plus.png" width="16" height="16" />'; var imgVolDown = '<img src="images/minus.png" width="16" height="16" />'; // Mensagens de alerta var noVideoAlert = 'Tem de seleccionar um vídeo!!'; // definir o volume inicial para apresentar volume.innerHTML = Math.round(video.volume*10); // inicia a reprodução play.addEventListener('click', playVideo, false); // inicia a reprodução e atualiza a imagem play/pause video.addEventListener('play', function(e) { play.innerHTML = imgPause; }, true); // pausa a reprodução e atualiza a imagem play/pause video.addEventListener('pause', function(e) { play.innerHTML = imgPlay; }, true); // termina a reprodução, atualizamos a imagem play/pause video.addEventListener('ended', function(e) { video.pause(); video.currentTime = 0; play.innerHTML = imgPlay; currentTime.innerHTML = timeFormat; duration.innerHTML = timeFormat; }, true); // parar a reprodução do vídeo stop.addEventListener('click', stopVideo, false); // permite tirar e colocar o som do vídeo sound.addEventListener('click', soundVideo, false); // converte o current time do video e apresenta o tempo a decorrer video.addEventListener('timeupdate', function(e) { currentTime.innerHTML = formatTime(parseInt(e.target.currentTime)); }, true); // aumentar o volume volUp.addEventListener('click', volumeUp, false); // diminuir o volume volDown.addEventListener('click', volumeDown, false); // init --> definições padrão para utilizar no load da página function init() { play.innerHTML = imgPlay; stop.innerHTML = imgStop; next.innerHTML = imgNext; prev.innerHTML = imgPrev; rew.innerHTML = imgRew; fwd.innerHTML = imgFwd; sound.innerHTML = imgUnMute; volUp.innerHTML = imgVolUp volDown.innerHTML = imgVolDown; currentTime.innerHTML = timeFormat; duration.innerHTML = timeFormat; } window.onload = init; // function para carregar videos da dropdownlist function loadVideo(VideoToLoad) { video.src = VideoToLoad; video.load(); video.play(); } // Play video function playVideo() { if (video.src != "") { if (!video.paused) { video.pause(); play.innerHTML = imgPlay; } else { video.play(); play.innerHTML = imgPause; duration.innerHTML = formatTime(parseInt(video.duration)); } } else { alert(noVideoAlert); } } // Stop video function stopVideo() { if (!video.paused) { video.pause() video.currentTime = 0; play.innerHTML = imgPlay; currentTime.innerHTML = timeFormat; duration.innerHTML = timeFormat; } else { return false; } } // Skip video function skipVideo(value) { if (video.src != "") { video.currentTime += value; } else { return false; } } // Mute/Unmute video function soundVideo() { if (!video.muted) { video.muted = true; sound.innerHTML = imgMute; } else { video.muted = false; sound.innerHTML = imgUnMute; } } // Aumentar volume function volumeUp() { if (video.volume < 1) { video.volume = Math.round((video.volume + 0.1)*10)/10; volume.innerHTML = Math.round(video.volume*10); } } // Diminuir volume function volumeDown() { if (video.volume > 0) { video.volume = Math.round((video.volume - 0.1)*10)/10; volume.innerHTML = Math.round(video.volume*10); } } // function para definir o formato do tempo de duração ou tempo actual do vídeo function formatTime(sec) { var hr = Math.floor(sec / 3600); var min = Math.floor((sec - (hr * 3600))/60); sec -= ((hr * 3600) + (min * 60)); sec += ''; min += ''; while (min.length < 2) { min = '0' + min; } while (sec.length < 2) { sec = '0' + sec; } hr = (hr)?':'+hr:''; return hr + min + ':' + sec; } </script> </body> </html> Desde já agradecido 👍 Edited July 12, 2012 by brunoais geshi! Link to comment Share on other sites More sharing options...
brunoais Posted July 12, 2012 Report Share Posted July 12, 2012 O teu código tem uma indentação complicada... Eu n sei se no original está bem indentado mas o que poseste aqui não tem indentação. Tenta copiar e colar outra vez mas não uses o sistema para colar código (o botão <>). Digamos que está avariado. "[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31 Life is a genetically transmitted disease, induced by sex, with death rate of 100%. Link to comment Share on other sites More sharing options...
unrealmanel Posted July 12, 2012 Author Report Share Posted July 12, 2012 Aqui vai o código de novo :b <!DOCTYPE html> <html> <head> <title>HTML 5 - Video Player</title> <style type="text/css"> body { font-family: Arial; text-align: center; } video, #play, #stop, #rew, #fwd, #next, #prev, #sound, #volUp, #volDown { cursor: pointer; } div.section { margin-bottom: 18px; } select { border: 1px solid #404040; width: 600px; height: 20px; } </style> </head> <body> <div class="section"> <video width="600" height="400" poster="images/poster.jpg" controls = ""></video> <br /> <select id="videoList" size="1" onchange="javascript:loadVideo(this.options[this.selectedIndex].value);"> <option value="videos/7.mp4">Avioes</option> <option value="videos/BigBuck.webm">BigBuck</option> <option value="videos/iceage.mov">IceAge</option> </select> </div> <div class="section"> <span id="currentTime"></span> / <span id="duration"></span> </div> <div class="section"> <span id="play"></span> <span id="stop"></span> <span> </span> <span> </span> <span id="rew" onclick="skipVideo(-5)"></span> <span id="fwd" onclick="skipVideo(5)"></span> <span> </span> <span> </span> <span id="prev"></span> <span id="next"></span> <span> </span> <span> </span> <span id="sound"></span> </div> <div class="section"> <span id="volUp"></span> [<span id="volume"></span>] <span id="volDown"></span> </div> <div class="section"></div> <script type="text/javascript"> // variáveis globais var videoList = document.getElementById('videoList'); var video = document.getElementsByTagName('video')[0]; var play = document.getElementById('play'); var stop = document.getElementById('stop'); var next = document.getElementById('next'); var prev = document.getElementById('prev'); var rew = document.getElementById('rew'); var fwd = document.getElementById('fwd'); var sound = document.getElementById('sound'); var currentTime = document.getElementById('currentTime'); var duration = document.getElementById('duration'); var volume = document.getElementById('volume'); var volUp = document.getElementById('volUp'); var volDown = document.getElementById('volDown'); // formato do tempo para apresentar estaticamente var timeFormat = '00:00'; // Imagens para os controls var imgPlay = '<img src="images/play.png" title="Play" />'; var imgPause = '<img src="images/pause.png" title="Pause" />'; var imgStop = '<img src="images/stop.png" title="Stop" />'; var imgMute = '<img src="images/mute.png" title="Volume On" />'; var imgUnMute = '<img src="images/unmute.png" title="Volume Off" />'; var imgNext = '<img src="images/next.png" title="Next" />'; var imgPrev = '<img src="images/prev.png" title="Prev" />'; var imgRew = '<img src="images/rew.png" title="Backward" />'; var imgFwd = '<img src="images/fwd.png" title="Forward" />'; var imgVolUp = '<img src="images/plus.png" width="16" height="16" />'; var imgVolDown = '<img src="images/minus.png" width="16" height="16" />'; // Mensagens de alerta var noVideoAlert = 'Tem de seleccionar um vídeo!!'; // definir o volume inicial para apresentar volume.innerHTML = Math.round(video.volume*10); // inicia a reprodução play.addEventListener('click', playVideo, false); // inicia a reprodução e atualiza a imagem play/pause video.addEventListener('play', function(e) { play.innerHTML = imgPause; }, true); // pausa a reprodução e atualiza a imagem play/pause video.addEventListener('pause', function(e) { play.innerHTML = imgPlay; }, true); // termina a reprodução, atualizamos a imagem play/pause video.addEventListener('ended', function(e) { video.pause(); video.currentTime = 0; play.innerHTML = imgPlay; currentTime.innerHTML = timeFormat; duration.innerHTML = timeFormat; }, true); // parar a reprodução do vídeo stop.addEventListener('click', stopVideo, false); // permite tirar e colocar o som do vídeo sound.addEventListener('click', soundVideo, false); // converte o current time do video e apresenta o tempo a decorrer video.addEventListener('timeupdate', function(e) { currentTime.innerHTML = formatTime(parseInt(e.target.currentTime)); }, true); // aumentar o volume volUp.addEventListener('click', volumeUp, false); // diminuir o volume volDown.addEventListener('click', volumeDown, false); // init --> definições padrão para utilizar no load da página function init() { play.innerHTML = imgPlay; stop.innerHTML = imgStop; next.innerHTML = imgNext; prev.innerHTML = imgPrev; rew.innerHTML = imgRew; fwd.innerHTML = imgFwd; sound.innerHTML = imgUnMute; volUp.innerHTML = imgVolUp volDown.innerHTML = imgVolDown; currentTime.innerHTML = timeFormat; duration.innerHTML = timeFormat; } window.onload = init; // function para carregar videos da dropdownlist function loadVideo(VideoToLoad) { video.src = VideoToLoad; video.load(); video.play(); } // Play video function playVideo() { if (video.src != "") { if (!video.paused) { video.pause(); play.innerHTML = imgPlay; } else { video.play(); play.innerHTML = imgPause; duration.innerHTML = formatTime(parseInt(video.duration)); } } else { alert(noVideoAlert); } } // Stop video function stopVideo() { if (!video.paused) { video.pause() video.currentTime = 0; play.innerHTML = imgPlay; currentTime.innerHTML = timeFormat; duration.innerHTML = timeFormat; } else { return false; } } // Skip video function skipVideo(value) { if (video.src != "") { video.currentTime += value; } else { return false; } } // Mute/Unmute video function soundVideo() { if (!video.muted) { video.muted = true; sound.innerHTML = imgMute; } else { video.muted = false; sound.innerHTML = imgUnMute; } } // Aumentar volume function volumeUp() { if (video.volume < 1) { video.volume = Math.round((video.volume + 0.1)*10)/10; volume.innerHTML = Math.round(video.volume*10); } } // Diminuir volume function volumeDown() { if (video.volume > 0) { video.volume = Math.round((video.volume - 0.1)*10)/10; volume.innerHTML = Math.round(video.volume*10); } } // function para definir o formato do tempo de duração ou tempo actual do vídeo function formatTime(sec) { var hr = Math.floor(sec / 3600); var min = Math.floor((sec - (hr * 3600))/60); sec -= ((hr * 3600) + (min * 60)); sec += ''; min += ''; while (min.length < 2) { min = '0' + min; } while (sec.length < 2) { sec = '0' + sec; } hr = (hr)?':'+hr:''; return hr + min + ':' + sec; } </script> </body> </html> Link to comment Share on other sites More sharing options...
MASNathan Posted July 12, 2012 Report Share Posted July 12, 2012 eu penso que o que ele queria dizer era para colocares o código dentro da tag [ code ] mas sem usares o botao <> Link to comment Share on other sites More sharing options...
unrealmanel Posted July 12, 2012 Author Report Share Posted July 12, 2012 Ah, eu acabei resolvendo o problema, mas resta-me uma duvida, é possivel controlar o tempo do video atraves de uma timeline? ex: ( youtube ). Link to comment Share on other sites More sharing options...
brunoais Posted July 12, 2012 Report Share Posted July 12, 2012 Há um atributo na tag que te permite isso ou fazes tu um. "[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31 Life is a genetically transmitted disease, induced by sex, with death rate of 100%. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now