Ir para conteúdo


Programar 2013: o 1º evento presencial do comunidade! 25 de Maio, Lisboa. Informações aqui!
Queres ganhar um Nokia Lumia 820? Então participa no concurso de aplicações para Windows 8/Phone!

- - - - -

Video Player

Iniciado por unrealmanel , 12 Jul 2012 11:53

  • Por favor inicie sessão para responder
5 respostas a este tópico

#1 unrealmanel

unrealmanel

    void

  • Membro
  • PipPip
  • 65 mensagens

Publicado 12 de Julho de 2012 - 11:53

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 : Código (HTML):
<!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>&nbsp;</span>
<span>&nbsp;</span>
<span id="rew" onclick="skipVideo(-5)"></span>
<span id="fwd" onclick="skipVideo(5)"></span>
<span>&nbsp;</span>
<span>&nbsp;</span>
<span id="prev"></span>
<span id="next"></span>
<span>&nbsp;</span>
<span>&nbsp;</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 :thumbsup:

Editado por brunoais, 12 de Julho de 2012 - 13:16.
geshi!

#2 brunoais

brunoais

    Unsigned User

  • Moderador
  • PipPipPipPipPipPip
  • 3057 mensagens

Publicado 12 de Julho de 2012 - 13:22

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.

#3 unrealmanel

unrealmanel

    void

  • Membro
  • PipPip
  • 65 mensagens

Publicado 12 de Julho de 2012 - 13:33

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>&nbsp;</span>
<span>&nbsp;</span>
<span id="rew" onclick="skipVideo(-5)"></span>
<span id="fwd" onclick="skipVideo(5)"></span>
<span>&nbsp;</span>
<span>&nbsp;</span>
<span id="prev"></span>
<span id="next"></span>
<span>&nbsp;</span>
<span>&nbsp;</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>

#4 MASNathan

MASNathan

    Boolean User

  • Membro
  • PipPipPip
  • 229 mensagens

Publicado 12 de Julho de 2012 - 16:43

eu penso que o que ele queria dizer era para colocares o código dentro da tag [ code ] mas sem usares o botao <>

#5 unrealmanel

unrealmanel

    void

  • Membro
  • PipPip
  • 65 mensagens

Publicado 12 de Julho de 2012 - 17:38

Ah, eu acabei resolvendo o problema, mas resta-me uma duvida, é possivel controlar o tempo do video atraves de uma timeline? ex: ( youtube ).

#6 brunoais

brunoais

    Unsigned User

  • Moderador
  • PipPipPipPipPipPip
  • 3057 mensagens

Publicado 12 de Julho de 2012 - 18:53

Há um atributo na tag que te permite isso ou fazes tu um.
Voltar a Javascript


  1. Portugal-a-Programar
  2. → Desenvolvimento Orientado para Web
  3. → Javascript
  4. Política de Privacidade
  5. Regras da Comunidade ·