Uso de la etiqueta de vídeo en HTML y sus atributos clave
Contenido del curso
Alejandro Ramos
Judit Castedo Valero
Alejandro Ramos
SANTIAGO QUINTERO GUARIN
Joel Dominguez Merino
Jeyson David Vargas Crespo
Juan Diego Loaiza Martinez
Platzi Team
Delaney David Sarmiento Hernández
Anthony Smith Quispe De la cruz
Sergio Andrés Bolaños Penagos
andres gonzalez
Jazmín Lizette Sánchez Neira
Christina Sarai Atoche Pascual
Eduin Jose Morales Munguia
Gianfranco Iván Misari Ortega
emanuel
Andrés Bregant
Kevin Andrey Mora Vásquez
Obed Paz
Geraldine Claros
DANIEL SUAREZ
Santiago Lopera Naranjo
Adrian Salgado
iecgerman .
Eduardo Reyes
David Santiago Hurtado Betancourt
Andres Condezo Monge
Paula Uzcategui Leon
Daniel Andree Ancaya Rodríguez
Joel Brandon Gutierrez Quispe
Jose Daniel Huerta Vazquez
Sebastián Pineda Ospina
Iván Arcos
Joel Dominguez Merino
David Castro
FELIX EVR
Alexander Arismendy
Nestor Quiroga Suárez 🧑🏼🚀
Leobardo Daniel Pineda Salgado
Geraldine Claros
Daniel Adolfo Ordoñez Rubio
Orlando Manuel Mendoza Vargas
Jerry Gil Contreras
Irving Juárez
iecgerman .
Alex hernandez mitre
Joel Brandon Gutierrez Quispe
Juan Felipe Sánchez Arango
La etiqueta <video>, tiene algunos atributos como: .
controls: agrega al video los controles necesarios para reproducir, pausar y adelantar.
preload = auto: hace que el navegador descargue el video, en el momento en el que se acceda a la página.
. La etiqueta <source>, se puede colocar dentro de una etiqueta <video> varias veces, para especificar diferentes rutas. Esto para asegurar que cualquier navegador pueda mostrar el video.
Muy buen resumen. Añado un par de cosas más sobre el atributo preload
Muchas gracias por el aporte :D
Hola!! si necesitan videos para practicar o para proyectos personales de buena calidad y que sean free, este es el sitio https://coverr.co/ si conocen otras dejen el link
De video no tenia recursos, muchas gracias!
Muy buen dato...muchas gracias...
Atributos de una etiqueta de video
Documentación : https://www.w3schools.com/tags/tag_video.asp
Atributos de una etiqueta source
Documentación : https://www.w3schools.com/tags/tag_source.asp
Gracias por el aporte compañero
Buena info
Buenas comunidad, he estado intentando insertar un video de Youtube a mi página y por lo visto no es tan fácil como asignar al atributo scr el URL del vídeo en cuestión, por lo visto hay que usar una etiqueta llamada iframe. Youtube te da el código HTML que tienes que incluir para mostar ese vídeo de una manera precisa, esto lo conseguimos en la opción de compartir => insertar => copias y pegas el código que te muestra y queda de esta forma:
Muy muy útil! Muchas gracias! Me estaba preguntando lo mismo cuando agregaban los videos, pensé que solo era poner el URL de YT
Gracias bro!
Aqui va mi aporte de mis apuntes :)
Holaaa, donde haces tus apuntes?
x2
Para duplicar una línea en otra línea se utiliza SHIFT + ALT + "Direccional Abajo"
Gracias por el dato!
Creo que voy a acordarme del día que aprendí esto el resto de mi vida. ¡Muchas gracias! <3
¡Les comparto mi resumen!
Controles y semántica básica
<video src="rutaVideo"></video>
<video src="rutaVideo" controls></video>
<video src="rutaVideo" controls preload="auto"></video>
<video src="rutaVideo#t=1.06, 1.40" controls preload="auto"></video>
<video controls preload="auto"> <source src="rutaVideo#t=1.06, 1.40"/> <source src="rutaVideo2#t=1.06, 1.40"/> <source src="rutaVideo3#t=1.06, 1.40"/> </video>
muchas gracias por tu resumen.
Gracias por tu aporte me ayudo mucho
Les comparto mis notas :)
<body> <main> <section> <!-- Control= "nos da los botones" **** preload ="permite que el video se auto carge antes de para una mejor experiencia del lado cliente" --> <video controls preload="auto"> <!-- Para no tener problemas en los navegadores defino las extenciones --> <source src="./miVideo.mp4#t=10,60" /> <source src="./miVideo.mpv#t=10,60" /> <!-- Para darle un tiempo inicio a fin lo hacemos con el # despues t="como quiero que inicie" lo separo con , despues le doy el otro tiempo donde quiero que finalice--> </video> </section> </main> </body>```
Hola, acerca de los controles del video, como verán cada navegador tiene su propio diseño para ello, que la verdad no es muy agradable a comparación de los controles de Platzi, YouTube, Netflix... Estas cosas pueden ser diseñadas a tu gusto con JavaScript. Por eso cuando termines este curso, y hayas tomado los curos básicos de JS. Te invito a que mires el curso profesional de JS. Allí le damos una mirada a los controles de videos, y unas cuantas cosas mas bastante interesantes! :D
Muchas gracias, tenia esa duda de si habían cursos de platzi que enseñaran esto un poco mas a profundidad.
voy muy lento :(
Les dejo una web para descargar videos profesionales cortos para uso gratuito y libre https://www.pexels.com/videos/
Gracias!!!
Buen aporte, Gracias!
Con este atributo se le puede poner una imagen al video antes de darle play. Como las miniaturas de Youtube poster="./Imagenes/gato1.jpg" En mi caso pues le puse la imagen de un gato
te lo agradezco
Muchas gracias !
Como sugerencia, pueden descargar la extensión de VisualStudioCode llamada "Live Server", les permitirá generar un servidor local y que no tengan que estar refrescando el navegador para ver cambios, éstos se generarán automáticamente al guardarlos en el editor.
Más que live Server, creo que es recomendable que vean el curso de prework para windows o de prework para mac. Toma poco tiempo y te da súper poderes para los cursos que se vienen de ahora en adelante.
Acá les dejo los atributos de Video, por cierto, con el atributo poster pueden poner un preview de su video 👇🏼
Buen aporte :D No conozco el atributo poster lo checare!
Genial, es cierto. Gracias Iván por compartirnos ese dato!
7:14 7:14 Eso es algo muy personal! No creo que se pueda hacer un curso sobre eso! XD jajajajajajaja
Lo peor fue q me puse a buscar en el video para saber que tema era el 7:14. Te mereces una manito abajo
Notas de la clase Etiqueta video: .
El mejor resumen de toda la clase! Gracias!
Encontre que una forma de añadir un video que provenga de youtube es:
<iframe width="800" height="294" src="https://www.youtube.com/embed/HW96jj_86CY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Mi pregunta sería como hago para poder en donde pongo lo de limitación de tiempo en este caso?
Hola, Geraldine :)
Usar un <iframe> permite incrustar el contenido de otra página en la nuestra, pero no tenemos el control total sobre ese contenido, porque es de terceros (especialmente YouTube que tiene sus propios controles y scripts incrustados).
En estos casos, el control depende mayormente del dueño del contenido que incrustamos (YouTube) y no tanto de nosotros.
siguiendo el comentario de @daniordonez... Como el dice, la etiqueta "iframe" se utiliza para incrustar contenido de otra pagina, esto literalmente es cierto, como ejemplo podrías insertar toda la pagina principal de wikipedia con la etiqueta iframe...
Crea una un archivo HTML y pega esto y veras:
<iframe height="560" width="315" src="https://www.wikipedia.com/" frameborder="0"></iframe>
Así quedó profe
Se le puede agregar etiquetas de ancho y alto al video para que no se vea muy grande, como en el caso del video del profe. Estas se utilizan de la siguiente manera:
<video width="320" height="240"> <source src="./video.mp4" type="video/mp4"> </video>
Gracias eso estaba buscando
excelente aporte bro !!!!
Use “poster” para poder ver una imagen antes de reproducir el video y “figcaption” visto en las clases anteriores para poner el nombre 😄
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="description" content="Esta página te mostrara un video musical"> <meta name="robots" content="index,follow"> <title>KIEL86 Home</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <main> <section> <video controls preload="auto" poster="preview_bga.jpg"> <source src="errorcode_0.m4v" /> <source src="errorcode_0.mp4#t=10,60" /> </video> <figcaption>ERRORCODE: 0 🎧</figcaption> </section> </main> </body> </html>
Este es mi aporte para esta clase y para este curso de HTML. https://devdocs.io/html/ Esta es una página web donde pueden encontrar muy buena documentación de todo tipo de tecnologias y lenguajes de programación.
