1

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

1 respuesta 1

1

Si vas a dejar esos tres únicos videos, estará más sencillo, pero si piensas más adelante agregar más fuentes de video, te recomiendo hacer más dinámico tu código, de cualquier forma para los tres que hay ahora te propongo lo siguiente:

Crear un estilo CSS con las siguientes características que podrás ajustar a tu gusto y necesidades:

<style>
   .borderColor {
       border-style: solid;
       border-color: green;
       border-width: 10px;
    }
</style>

Luego en tu JS añadir las siguientes lineas:

PARA EL BOTÓN DEL VIDEO 1:

    document.getElementById("video1").classList.add("borderColor");
    document.getElementById("video2").classList.remove("borderColor");
    document.getElementById("video3").classList.remove("borderColor");

PARA EL BOTÓN DEL VIDEO 2:

    document.getElementById("video2").classList.add("borderColor");
    document.getElementById("video1").classList.remove("borderColor");
    document.getElementById("video3").classList.remove("borderColor");

PARA EL BOTÓN DEL VIDEO 3:

    document.getElementById("video3").classList.add("borderColor");
    document.getElementById("video2").classList.remove("borderColor");
    document.getElementById("video1").classList.remove("borderColor");
1
  • Muchisimas gracias con esto de momento esta perfecto Commented el 24 may. 2020 a las 15:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.