Este tutorial revisaremos y desarrollaremos una página web aplicando el elemento HTML5 VIDEO con la finalidad de agregar videos a nuestras páginas.
Requisitos:
- Visual Studio Code.
- HTML5 y CSS3
- Chrome o Safari.
- Video MP4
Lo que veremos en este tutorial:
- Construir la página HTML5.
- Elemento HTML5 - Video.
- Construir el CSS para las páginas.
- Resumen.
1. Contruir la página HTML5.
Crear un nuevo archivo HTML de nombre video.html. En el siguiente bloque de código se ejecutará el video:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5 Element Video - Hadsonpar</title> <link href="assets/css/style.css" rel="stylesheet"> </head> <body> <!-- ***** HTML5 Element Video Start ***** --> <div class="main-banner" id="top"> <video autoplay muted loop id="bg-video" src="https://storage.googleapis.com/cms-storage-bucket/029113ae2cbbcf9493fe.mp4" type="video/mp4"> </video> <div class="video-overlay header-text"> <div class="caption"> <h6>HTML5 Video</h6> <h2>Many Tutorials <a href="http://blog.hadsonpar.com/"><em>Blog</em></a></h2> <div class="main-button scroll-to-section"> <a href="http://blog.hadsonpar.com/2024/04/reproducir-video-con-html5.html">Reproducir Video Con HTML5</a> </div> </div> </div> </div> <!-- ***** HTML5 Element Video End ***** --> </body> </html> |
2. Elemento HTML5 - Video.
Atributos Video:
autoplay: Atributo booleano; si esta se especifica, el video comenzará a reproducirse automáticamente tan pronto como sea posible al cargar la página web.
autobuffer: Atributo booleano; si se especifica, el video comenzará automáticamente incluso si no está listo para reproducirse de forma automática.
buffered: Atributo que se puede leer para determinar qué intervalos de tiempo del multimedia se han almacenado en búfer, este atributo también contiene un objeto TimeRanges (en-US) .
controls: Controles para permitir que el usuario controle la reproducción del video, incluyendo volumen, búsqueda y pausar/reanudar reproducción.
height: La altura del área de visualización del vídeo en píxeles CSS.
width: La anchura del área de visualización del vídeo en píxeles CSS.
loop: Atributo booleano; si se especifica, al final del video retormará automáticamente al principio.
preload: El objetivo de este atributo enumerado es proporcionar una sugerencia al navegador sobre qué cree el autor que llevará a la mejor experiencia para el usuario. Se considera los siguientes valores:
- none: sugiere bien que el autor cree que el usuario no tendrá que consultar ese video, bien que el servidor desea minimizar su tráfico; es decir, esta sugerencia indica que no se debe almacenar en caché este video.
- metadatos: sugiere que aunque el autor piensa que el usuario no tendrá que consultar este video, es razonable capturar los metadatos (p. ej. longitud).
- auto: sugiere que el usuario necesita tener prioridad; es decir, esta sugerencia indica que, si es necesario, se puede descargar el video completo, incluso aunque el usuario no vaya a usarlo.
- la cadena vacía: que es un sinónimo del valor auto.
Si no está configurado, su valor predeterminado estará definido por el navegador (es decir, cada navegador puede elegir su propio valor predeterminado), aunque se aconseje que se establezca el valor inicial.
poster: Una URL que indica un marco de póster para mostrar el resultado hasta que el usuario reproduzca o busque. Si este atributo no se especifica, no se muestra nada hasta que el primer cuadro está disponible, entonces se muestra el primer marco como el marco de póster.
src: La URL del vídeo que se va a insertar.
También podrás optar por el usar el elemento <source> dentro del bloque de vídeo para especificar el video que se va a incrustar.
Desarrollo:
xyz
3. Construir el CSS para las páginas.
xyz
3. Resumen.
xyz
Disponible en GitHub
Gracias nuevamente 😊; comentarios y apreciaciones son bienvenido, un fuerte abrazo para todos ✌...!!
0 Comentarios