Ir para o conteúdo
unrealmanel

Video Player

Por unrealmanel, em Javascript

Mensagens Recomendadas

unrealmanel    0
unrealmanel
Publicado (editado)

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 :thumbsup:

Editado por brunoais
geshi!

Partilhar esta mensagem

Link para a mensagem
Partilhar noutros sites
brunoais    69
brunoais
Publicado

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.

Partilhar esta mensagem

Link para a mensagem
Partilhar noutros sites
unrealmanel    0
unrealmanel
Publicado

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>

Partilhar esta mensagem

Link para a mensagem
Partilhar noutros sites
unrealmanel    0
unrealmanel
Publicado

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

Partilhar esta mensagem

Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora
Ir Para Lista de Tópicos Javascript
×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade

  Aceito