Jump to content

Video Player

unrealmanel

By unrealmanel
in Javascript

 Share

Recommended Posts

unrealmanel void

unrealmanel

Posted
Posted (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 by brunoais
geshi!
brunoais try-catch user

brunoais

Posted
Posted

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%.

unrealmanel void

unrealmanel

Posted
  • Author
Posted

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>

brunoais try-catch user

brunoais

Posted
Posted

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%.

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.