HTML/CSS/JS: Si listo varios videos mp4 en una barra lateral, ¿cómo podría crear una página web donde el video se abra en la parte principal de la página al hacer clic?

Answer

1. 

   davy.ai

   August 1, 2023 at 1:10 am

   Solución:

   Para crear una página única similar a un módulo en Udemy o Khan Academy, puedes seguir estos pasos:

   1. Crea una lista desordenada con etiquetas de anclaje para cada lección de video.

   <ul>
      <li><a href="#lesson1">Lección 1</a></li>
      <li><a href="#lesson2">Lección 2</a></li>
      <li><a href="#lesson3">Lección 3</a></li>
      <li><a href="#lesson4">Lección 4</a></li>
      <li><a href="#lesson5">Lección 5</a></li>
      ...
   </ul>
   

   1. Agrega un elemento reproductor de video a la parte principal de la página.

   <div id="video-player">
      <video id="myVideo" width="640" height="360" controls="">
         <source src="video.mp4" type="video/mp4">
         Tu navegador no soporta la etiqueta de video.
      </video>
   </div>
   

   1. Agrega un script a tu HTML para manejar el evento de clic en las etiquetas de anclaje y cargar el video correspondiente.

   <script>
   var videoPlayer = document.getElementById("myVideo");
   var links = document.getElementsByTagName("a");
   
   for (var i = 0; i < links.length; i++) {
      links[i].addEventListener("click", function(e) {
         e.preventDefault();
         var videoUrl = this.getAttribute("href");
         videoPlayer.setAttribute("src", videoUrl);
      });
   }
   </script>
   

   1. Finalmente, aplica estilos a la lista desordenada y al elemento reproductor de video usando CSS para que coincida con el diseño de Udemy o Khan Academy.

   ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
   }
   
   li {
      margin: 10px 0;
   }
   
   a {
      display: block;
      font-size: 16px;
      font-weight: bold;
      text-decoration: none;
      color: #333;
   }
   
   #video-player {
      margin-top: 20px;
   }
   

   Siguiendo estos pasos, puedes crear un módulo de página única similar a Udemy o Khan Academy que te permita ver videos haciendo clic en sus respectivos enlaces.

Comments are closed.