<!doctype html>
<html>
<head>
<title>Tag video</title>
<meta charset="utf-8" />
<script language="Javascript">
window.onload = function(){
var b1 = document.getElementById("src1");
var b2 = document.getElementById("src2");
var b3 = document.getElementById("src3");
var b4 = document.getElementById("src4");
b1.addEventListener("click",changeSrc);
b2.addEventListener("click",changeSrc);
b3.addEventListener("click",changeSrc);
b4.addEventListener("click",changeSrc);
}
function changeSrc(event){
console.log(event);
console.log(event.target.value);
var video = document.getElementById("Video1");
video.src = event.target.value;
}
function vidplay1()
{
var video = document.getElementById("Video1");
var button = document.getElementById("play");
if (video.paused)
{
video.play();
button.textContent = "II";
}
else
{
video.pause();
button.textContent = "➤";
}
}
function restart1()
{
var video = document.getElementById("Video1");
video.currentTime = 0;
}
function skip1(value)
{
var video = document.getElementById("Video1");
video.currentTime += value;
}
function expand1()
{
//2do;
}
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<video controls width="502" height="360" id="Video1">
<source src="video1.webm" type=video/webm>
</video>
</td>
</tr>
<tr>
<td align="center">
<div id="PLAYER1">
<button id="restart" onclick="restart1()">↺</button>
<button id="rew" onclick="skip1(-10)">↶</button>
<button id="play" onclick="vidplay1()">➤</button>
<button id="fastFwd" onclick="skip1(10)">↷</button>
<button id="exp" onclick="expand1()">[x]</button>
</div>
</td>
<button id="src1" value = "video1.webm"><img src="video1.png" width="310" height="220" /></button>
<button id="src2" value = "video2.webm"><img src="video2.png" width="310" height="220" /></button>
<button id="src3" value = "video3.webm"><img src="video3.png" width="310" height="220" /></button>
<button id="src4" value = "video4.webm"><img src="video4.png" width="300" height="220" /></button>
</tr>
</table>
</body>
<html>
Adicione um comentário
|
1 Resposta
Para isso existe a Fullscreen API. Com ela você pode:
- Verificar se o modo Tela Cheia está ativado (
fullscreenEnabled
) - Saber se há algum elemento qual em tela cheia e qual é (
nodeName
) (fullscreenElement
) - Ativar o modo (
requestFullscreen
) - Sair do modo (
exitFullscreen
oucancelFullScreen
no firefox) - Além de usar alguns eventos como o
onfullscreenchange
Aplicação
function toggleFullScreen() {
if(!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement || document.msFullscreenElement)){
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.msRequestFullscreen) {
video.msRequestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
}
}else{
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullscreen) {
document.mozCancelFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
video.addEventListener('dblclick', toggleFullScreen)
Obs.: Ainda se faz necessário o emprego dos prefixos dos browsers (webkit, moz...)
No caso acima apliquei a mudança ao vídeo no evento dblclick
.
Espero ter ajudado.
-
Desculpe a ignorância, mas seu eu pegar esse codigo que vc me mandou e colocar no lugar da minha função expand1 era pra funcionar meu botão, ou eu tenho que fazer alterações?– LawrenceCommented 19/09/2016 às 0:31
-
A função toggle faz a alternância entre ativar e desativar a tela cheia. Se desejar isso pode colar a função em outro lugar e apenas chama-la dentro de expand1. Commented 19/09/2016 às 10:32
-
Sou iniciante em javascript e não entendi como implementar o codigo para fazer meu botão funcionar com o onclick– LawrenceCommented 19/09/2016 às 20:06
-
troquei o botão expand1 por toggleFullScreen e tirei a função expand1.– LawrenceCommented 19/09/2016 às 20:14
-
@lawrence irei editar a resposta de modo mais claro assim que possível, agora estou pelo celular. Commented 20/09/2016 às 1:15