En este programa de realizacion de video necesito que al pulsar en el boton ver video, el borde de ese bloque cambie de forma que sepa en todo momento que video es el que visualizo en la proyeccion principal.
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="video.css">
<title>VIDEO 01</title>
<script src="video-01.js" defer></script>
</script>
</head>
<body>
<h1>EMISION PRINCIPAL</h1>
<video id="mainvideo"></video>
<br>
<div>
<p>Camara 1</p>
<video autoplay muted id="video1"></video>
<br>
<button id="play1">Ver Video 1</button>
<button id="stop1">Parar Video 1</button>
</div>
<div>
<p>Camara 2</p>
<video autoplay muted id="video2"></video>
<br>
<button id="play2">Ver Video 2</button>
<button id="stop2">Parar Video 2</button>
</div>
<div>
<p>Camara 3</p>
<video autoplay muted id="video3"></video>
<br>
<button id="play3">Ver Video 3</button>
<button id="stop3">Parar Video 3</button>
</div>
</body>
</html>
Esta parte es la del codigo html que tengo y ahora os comparto mi codigo javascript tambien:
console.log("Ejecutando JS...");
//----- Obtener elemento de video y configurarlo
const video1 = document.getElementById("video1")
const video2 = document.getElementById("video2")
const video3 = document.getElementById("video3")
const mainvideo = document.getElementById("mainvideo")
video1.width=300; //-- Tamaño de la pantalla de video
video1.height=200;
video2.width=300;
video2.height=200;
video3.width=300;
video3.height=200;
mainvideo.height=500;
mainvideo.width=600;
//-- Imagen estática a mostrar cuando el video no
//-- ha arrancado
video1.poster="https://github.com/myTeachingURJC/2019-2020-CSAAI/raw/master/L10/test.png";
video2.poster="http://2.bp.blogspot.com/-X0ONQBX-Fbw/Vn1j-pZ8cqI/AAAAAAAABtY/QsyjjRv4M8c/s1600/carta%2Bde%2Bajuste%2Brmtv.jpg";
video3.poster="https://www.cienciatk.csic.es/uploads/prevs/0cartadeajuste.jpg";
mainvideo.poster = "https://naftic.com/wp-content/uploads/2018/06/facebook-live-crossposting.jpg"
//-- Obtener los botones
const play1 = document.getElementById("play1")
const stop1 = document.getElementById("stop1")
const play2 = document.getElementById("play2")
const stop2 = document.getElementById("stop2")
const play3 = document.getElementById("play3")
const stop3 = document.getElementById("stop3")
video1.src="https://gsyc.urjc.es/jmplaza/csaai/realizador-fuente1.mp4"
video2.src="https://gsyc.urjc.es/jmplaza/csaai/realizador-fuente2.mp4"
video3.src="https://gsyc.urjc.es/jmplaza/csaai/realizador-fuente3.mp4"
//-- Función de retrollamada del botón de ver
play1.onclick = () => {
console.log("Click!");
video1.src="https://gsyc.urjc.es/jmplaza/csaai/realizador-fuente1.mp4"
video1.play();
mainvideo.src="https://gsyc.urjc.es/jmplaza/csaai/realizador-fuente1.mp4"
mainvideo.play();
};
//-- Funcion de retrollamada del boton de parar
stop1.onclick = () => {
video1.pause();
//-- Quitar la fuente de video, para que se muestre la
//-- imagen definida en el atributo poster
video1.src=null;
}
//-- Función de retrollamada del botón de ver
play2.onclick = () => {
console.log("Click!");
video2.src="https://gsyc.urjc.es/jmplaza/csaai/realizador-fuente2.mp4"
video2.play();
mainvideo.src="https://gsyc.urjc.es/jmplaza/csaai/realizador-fuente2.mp4"
mainvideo.play();
};
//-- Funcion de retrollamada del boton de parar
stop2.onclick = () => {
video2.pause();
//-- Quitar la fuente de video, para que se muestre la
//-- imagen definida en el atributo poster
video2.src=null;
}
//-- Función de retrollamada del botón de ver
play3.onclick = () => {
console.log("Click!");
video3.src="https://gsyc.urjc.es/jmplaza/csaai/realizador-fuente3.mp4"
video3.play();
mainvideo.src="https://gsyc.urjc.es/jmplaza/csaai/realizador-fuente3.mp4"
mainvideo.play();
};
//-- Funcion de retrollamada del boton de parar
stop3.onclick = () => {
video3.pause();
//-- Quitar la fuente de video, para que se muestre la
//-- imagen definida en el atributo poster
video3.src=null;
}
He probado lo modificación en JS y tambien directamente en HTML pero no consigo que me cambie el color del borde. Lo ideal es que al clicar en el boton Ver Video 1, 2 o 3 se cambie el borde correspondiente a ese bloque