Web Developer Fundamentals
¿Qué aprenderás sobre HTML y CSS?
¿Qué es el Frontend?
¿Qué es Backend?
¿Qué es Full Stack?
Páginas Estáticas vs. Dinámicas
HTML
HTML: anatomía de una página web
Index y su estructura básica: head
Index y su estructura básica: body
Reto: crea tu lista de compras del supermercado
Anatomía de una etiqueta de HTML
Etiquetas multimedia
Tipos de imágenes
Optimización de imágenes
Etiqueta img
Etiqueta figure
Etiqueta video
Formularios
Etiqueta form e input
Calendar
Autocomplete y require
Select
Input type submit vs. Button tag
CSS
¿Qué es CSS?
¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID
Pseudo clases y pseudo elementos
Anatomía de una regla de CSS
Modelo de caja
Herencia
Especificidad en selectores
Demo de especificidad y orden en selectores
Más sobre selectores
Combinadores: Adjacent Siblings (combinators)
Combinadores: General Sibling
Combinadores: Hijo y Descendiente
Medidas
Medidas EM
Medidas REM
Max/Min width
Position
Display
Desafío: Layout 1
Display Flex
Flexbox layouts
Variables
Web fonts
Responsive Design
Responsive design: media queries
Estrategias de responsive: mostly fluid
Implementando mostly fluid
Layout shifter CSS
Column drop
Buenas prácticas y ejemplos de responsive
Imágenes responsive
Accesibilidad
Semántica
Textos
Labels, alt y title
Próximos pasos
Próximos pasos como Web Developer
Bonus: tabla de etiquetas HTML
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Convierte tus certificados en títulos universitarios en USA
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
Aportes 358
Preguntas 169
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.
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
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
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:
Aqui va mi aporte de mis apuntes 😃
Para duplicar una línea en otra línea se utiliza SHIFT + ALT + “Direccional Abajo”
**¡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>
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! 😄
Les dejo una web para descargar videos profesionales cortos para uso gratuito y libre https://www.pexels.com/videos/
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
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.
Acá les dejo los atributos de Video, por cierto, con el atributo poster pueden poner un preview de su video 👇🏼
7:14 7:14 Eso es algo muy personal! No creo que se pueda hacer un curso sobre eso! XD jajajajajajaja
Notas de la clase Etiqueta video:
.
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>
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.
Así quedó profe
En una ocasión me pidieron agregar un video de introducción para una página
como bien menciona Diego los navegadores penalizan eso ya que es desición
del usuario, sin embargo, si usas el atributo muted el mismo inicializa sin que
el navegador solicite el permiso al usuario, no importa si el video no tiene audio
necesitas ese atributo para que pueda inicializar.
Para descargar videos gratis
https://www.pexels.com/es-es/
Para comprimir tu video
https://clideo.com/
Si quieres autoreproducir tu video tendras que hacerlo muteandolo para que algunos navegadores te lo permitan
<video controls preload="auto" autoplay muted>
<source src="./img/stories.mp4">
</video>
Le puse un titulo al video utilizando lo visto anteriomente con la eriqueta de figcaption al cerrar al aetiqueta de video
iv.-video
1.-video
Para poder usar los videos en nuestros proyectos web vamos a utilizar una etiqueta especial.
<section>
<video src="./02 El nuevo mundo. Entender las tendencias, datos y fuerzas en la nueva transformación digital.mov"></video>
</section>
Pone el video pero no me da controles (play, pausa, etc)
2.- Atributo controls
Para darle controles al video utilizo el atributo controls. Este es un atributo de solo una palabra que no tiene valor.
<section>
<video controls src="./02 El nuevo mundo. Entender las tendencias, datos y fuerzas en la nueva transformación digital.mov"></video>
</section>
3.- Atributo preload
Va a servir para que el video cargue cuando la persona entra a la página y que lo tenga que esperar a descargarlo cuando haga click en él. Ojo, no hace que se reproduzca solo.
<section>
<video controls preload=”auto” src="./02 El nuevo mundo. Entender las tendencias, datos y fuerzas en la nueva transformación digital.mov"></video>
</section>
4.-Source
Esta etiqueta sirve para poner múltiples formatos de video para que así se pueda ajustar al formato que el navegador use.
<section>
<video controls preload="auto">
<source src="./02 video1.mp4" />
<source src="./02 video2.mov" />
<source src="./02 video2.m4v" />
</video>
</section>
5.-#t
Este adicional al atributo que se pondrá en source servirá para que el video se reproduzca y termine en el segundo deseado.
<section>
<video controls preload="auto">
<source src="./02 video1.mp4#t=10,60" />
<source src="./02 video2.mov#t=10,60" />
<source src="./02 video2.m4v#t=10,60" />
</video>
</section>
Carajo estoy adicto a Platzi, me estreso si no estoy metido aquí
Me parece que dentro de esta clase debería estar también como enlazar un video de YouTube en la pagina WEB, se que no va dentro de la explicación de la etiqueta video, pero ya que se esta hablando sobre los videos de una pagina seria la sección correcta para explicarlo.
les dejo este pedazo de código que genera YouTube para enlazarlo a tu pagina:
<html lang="en">
<head>
<meta name="description" content="metatags de videos HTML" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Clase Video HTML</title>
</head>
<body>
<main>
<section>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/iwaUan_AA2A"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
>
</iframe>
</section>
</main>
</body>
</html>
<code>
<video src=””></video>: etiqueta de video que permite renderizar el video, pero por si solo lo carga, pero no tiene botones de play o pausa, para ello:
Controls: es un atributo que permite tener los controles para manipular el video en el navegador.
Preload=”auto”: atributo que ayuda para que el video se empiece a renderizar, pero no hace que se reproduzca solo, ya no se puede.
#t=10,60: es una extensipon de sourse donde se especifica cuando quiero que arranque el video y donde finalice.
<source />: etiqueta que permite especificar diferentes rutas, esto con el fin de asegurar que el navegador pueda mostrar el video.
Esta muy bueno el curso, diego explica muy bien pero nunca nos dice como ubicar las fotos/videos donde queremos. yo creo que tendria que ser uno de los aportes principales.
Este pequeño momento de mi vida se llama felicidad:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<main>
<section>
<video controls preload="auto" >
<source src="Gera Mx ft Samantha Barrón - Lo Nuestro Se Murió 💔 (Video Oficial).webm#t=10,150" />
</video>
</section>
</main>
</body>
</html>
Les comparto mi proyecto :3
Después de esta clase así es como esta quedando!!
¿Para qué nos sirve la etiqueta <video>?
<video src="#"> </video>
¿Cuál es es el atributo que necesita la etiqueta video para funcionar correctamente?
<video src="#" controls> </video>
¿Para qué nos sirve el atributo preload=“auto”?
<video src="#" controls preload="auto"> </video>
¿Cómo podemos configurar el tiempo (segundos o minutos) en el que queremos que el video se reproduzca?
<video src="./video/video.mp4#t=20,67" controls preload="auto">
¿Para qué nos sirve la etiqueta <source>?
<video controls preload="auto">
<source src="./video/video.mp4">
<source src="./video/video.m4v">
</video>
¿En caso de que el navegador admita todos los formatos que agregamos a las etiquetas <source> cuál tomará el por defecto para renderizar el video en la página web?
YouTube nos da la opcion de poner sus videos en nuestra pag, lo que tenemos que hacer es ir al video en cuestion, darle clip derecho y nos da la opcion de Copiar código de inserción.
Luego lo pegamos en nuestro código y ya está.
<iframe width="1031" height="580" src="https://www.youtube.com/embed/kxL2P2gsJIo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<section>
<video controls preload="auto">
<source src="./miVideo.mp4#t=10,60" />
<source src="./miVideo.mpv#t=10,60" />
</video>
</section>`
en la etiqueta vídeo tenemos dos referencias:
Control= nos da los botones del vídeo
preload = permite que el vídeo se
auto cargue antes de para una mejor experiencia del lado cliente
para mejor la compatibilidad de los vídeos con diferentes navegadores pondremos los vídeos con diferentes exenciones, dentro de la etiqueta vídeo pondremos la localización de los vídeos por medio de la etiqueta source con su atributo src que nos indicara la ruta de el vídeo
Para darle un tiempo inicio a fin lo hacemos con el # después t= y colocaremos cuando quiero que inicie, después lo separo con una coma , y después le indico el tiempo en el que quiero que finalice
Asi quedo mi pagina despues de insertar un video local y tambien un video de YouTube (Un video de Freddy Vega)
La etiqueta <video> también tiene dos atributos vacíos:
.
Hay una diferencia entre:
preload="auto"
y
preload="metadata"
auto renderiza el video completo cuando renderiza la pagina.
.
metadata renderiza al menos:
.
Usar auto no es una buena idea porque habremos usado ancho de banda para renderizar completamente un video que el usuario quizá no vea, metadata es mas utíl pues solo renderiza lo necesario, si el usuario da play al video, ahora si se renderizará el resto.
aquí hay una prueba que demuestra la eficiencia de metadata.
mis apuntes de esta clase espero le sirvan a alguien:
Con el atributo poster establecemos la imagen de preview
poster="img/fideos.png"
Al parecer solo funciona en el navegador firefox
Excelentes clases, he tomado otros cursos del tema pero nunca tan claros y simples! Felicidades!
Mi primer video en html.
Alguien esta trabajando con WSL(Windows subsytem Linux);si es así podría decirme como copiar imágenes y videos a la carpeta del proyecto.
si algunos quedamos tentados de reducir el tamaño de la ventana del video, yo le agregué:
width=“640” height=“380”></video>
y después usé el figcaption para poner la descripción del video :3
gracias a las lecciones de Freddy recordé esos parámetros n.n
🎥 <video> permite insertar videos, donde podremos manipular la reproducción.
de hecho en la actualidad todos los navegadores aceptan el formato MP4 asi evitamos tener muchos videos enlazados y si un navegador no lo soporta le ponemos el mensaje de que tiene que actualizar su navergador, ocupemos HTML en su version 5
<video controls preload="auto">
<source src="./video/cover.mp4">
<p>Lo siento tu navegador no soporta videos html5</p>
</video>
Así como tenemos una etiqueta para video, para audio es muy similar:
Tenemos la etiqueta audio, con sus atributos src, controls, autoplay, etc. Esto te puede servir si estas desarrollando un videojuego en la web por ejm.
Herramientas para multimedia
El elemento HTML <source> especifica recursos de medios múltiples para los elementos** <picture>, <audio>, o <video>**. Es un elemento vacío. Normalmente se utiliza para servir el mismo contenido multimedia en varios formatos soportados por diferentes navegadores.
fuente:https://developer.mozilla.org/es/docs/Web/HTML/Elemento/source
La etiqueta de video en <source> no solo puede contener las opciones de video, sino que además el tipo de este:
<video>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
Estos son mis apuntes de esta sección.
etiqueta utilizada solo cuando la fuente del video es un archivo y no una url de otra web
Así como tenemos la etiqueta img para renderizar imágenes tenemos la etiqueta video para poder renderizar videos, la usamos de la siguiente manera
<video src="fuente de nuestro video"></video>
La etiqueta de video por sí sola hace que el video aparezca en la pantalla pero esto no nos da acceso a los controles para reproducir o pausar, o incluso la barra de duración del video. Para poder ver esto tenemos que agregar un atributo sin valor el cual es controls de la siguiente manera
<video src="fuente-del-video" controls></video>
También dentro de esta etiqueta tenemos el atributo preload que nos permite cargar el video de una manera específica.
La manera de usar el atributo preload es así.
<video src="fuente-del-video" controls preload="auto"></video>
Pero allí no termina la cosa.
En este caso, podemos usar la etiqueta <source> en donde colocaríamos contenido en la etiqueta de video. Y en esta etiqueta es donde pondríamos el video en los distintos formatos que lo tengamos, ya sean mkv, m4v, mp4, etc…. Si el navegador no entiende uno de estos, buscará en las distintas fuentes de los videos agregados para renderizar el video que nosotros tengamos y que el navegador pueda leer.
Se usa de la siguiente forma
Un atributo muy bueno es “MUTED” para que el video se reprodusca sin sonido cuantas veces es de noche y sin querer le pone play a un video y se escucha a maximo volumen y despertamos a todos los vecinos ajjajaj
Verán varias páginas que reproducen vídeo automáticamente y es que Chrome y Webkit (Safari) ahora cambiaron su politica con respecto a la etiqueta
<video autoplay>
Cuando este esta muteado.
Política de Autoplay en Chrome
Política de Autoplay en Webkit
Para quellos que deseen profundizar: https://lenguajehtml.com/html/multimedia/etiquetas-html-de-video/
Por si le sirve a alguien mis notas:
<main>
<section>
<video controls preload="auto" width="500px" height="250px">
<source src="./videos/NavegandoporelmercadoOpenSea.mp4#t=10,15" />
<source src="./videos/NavegandoporelmercadoOpenSea.m4v#t=10,15" />
</video>
<!-- La etiqueta source sirve para poder poner varios opciones de video .mp4, .m4v, entre otras y dejamos que el navegador elija cual reproducir -->
<!-- controls es el atributo para poder ver los controles en el video -->
<!-- preload auto es el atributo que hará que el navegador empiece a descargar el video en el momento que vea que existe una etiqueta de video -->
<!-- t=10,15 sirve para poder elegir donde empezar y terminar el video, se agrega en el contedigo del atributo src -->
</section>
</main>
Les comparto mis notas de la clase! Está escrito en HTML, como modo de práctica 😃
Click aquí > Bloc de notas
La etiqueta <video></video>, va siempre dentro del contenedor <body></body>, pues es un elemento visible.
El elemento<video></video> contiene atributos como:
src= “”
controls preload=
“auto” “metadata” “preload”
Usando semántica HTML quedaría un código como:
<body>
<main>
<section>
<video src="https://platzi.com/clases/1973-web-performance/30427-bienvenida-al-curso/" controls preload="auto"></video>
</section>
</main>
</body>
En caso de necesitar cargar varios formatos de videos, indicamos con la etiqueta <source/> y el atributo src="" los diferentes formatos disponibles y así dejamos la elección de que formato mostrar al navegador que lo interprete.
<video>
<source src= "https://platzi.com/clases/1973-web-performance/30427-bienvenida-al-curso"/>
</video>
<video>se utiliza para mostrar un video en una página web.controls agrega controles de video, como reproducción, pausa y volumen.autoplay booleano; si se especifica, el video comienza a reproducirse automáticamente tan pronto como puede hacerlo sin detenerse para terminar de cargar los datos.
preload .preload proporcionar una pista al navegador sobre lo que el autor cree que conducirá a la mejor experiencia de usuario con respecto al contenido que se carga antes de reproducir el video. Puede tener uno de los siguientes valores:
none: indica que el video no debe estar precargado.metadata: indica que solo se obtienen los metadatos del video (por ejemplo, la duración).auto: indica que se puede descargar todo el archivo de video, incluso si no se espera que el usuario lo use.muted se usa para establecer silencio al reproducir el video.
widthy height. Si no se configuran la altura y el ancho, la página puede parpadear mientras se carga el video.<source> elemento le permite especificar archivos de video alternativos que el navegador puede elegir. El navegador utilizará el primer formato reconocido.<video>y </video>solo se mostrará en navegadores que no admitan el <video>elemento.La etiqueta <video>, tiene algunos atributos como:.
<video controls preload="auto" poster="img/pexels.jpg" width="500px">
<source src="video/pexels-宇航-钱-10641426.m4v#t=2,3"/>
<source src="video/pexels-宇航-钱-10641426.mp4#t=2,3"/>
<source src="video/pexels-宇航-钱-10641426.mkv#t=2,3"/>
</video>
Tipos de formato para la web
Recomiendo esta recurso web w3shools
Aquí mas sobre la etiqueta video que seria importante leer
https://developer.mozilla.org/es/docs/Web/HTML/Element/video
Resumen de la etiqueta <video>
La etiqueta <video> se utiliza para cargar un video.
Esta se iniciara congelada, para darle formato de video hay que activarla con el atributo controls.
Para comenzar a cargar el video (NO QUE SE REPRODUZCA, sino que se cargue y este disponible para su reproduccion mientras otro video esta reproduciendo) utilizamos el atributo preload="auto".
¿Y donde va el video? Ahhh, existen dos opciones.
En primer lugar lo cargamos dentro de la etiqueta <video src="video.mp4">, pero para facilitarle la lectura a la web, ya que la web utilizara el formato de lectura habil del video (mp4, m4v), utilizaremos la etiqueta <source src"video.mp4">
Para finalizar tenemos la posibilidad de que el video se cargue a partir de un determinado tiempo, hasta un determinado tiempo, colocando un #t=5,10 representando el primer numero el tiempo de inicio, y el segundo numero el tiempo de finalizado.
Todo el codigo quedaria de la siguiente manera:
<video controls width="300" preload="auto">
<source src="./unmate.mp4#t=5,10">
</video>```
Resumen
<video> Funciona de manera similar a la etiqueta img. Tenemos que especificar su ruta con src.
controls es un atributo que no tiene ningún valor dentro. Solo se coloca para que el video tenga una barra de reproducción para control del usuario.
preload=”auto” permite que el video esté cargado para que apenas se clickee play, se reproduzca. No inicia el video de manera autónoma, ya que esto está penalizado por algunos navegadores. Es decisión del usuario cuándo reproducir un vídeo.
Para poder hacer un enfoque en un rango específico del video, debemos colocar #t= justo al final de la ruta del video. Ej: src="./video/pandora.mp4#t=10,50" . Aquí le decimos que empiece en el segundo 10 y se detenga en el 50.
<source> la usamos para indicar distintos formatos de video dentro de la etiqueta <video>. No todos los navegadores comprenden todos los formatos de video. Al usar esta etiqueta le dejamos la elección al navegador sobre qué formato usar. Si usamos esta etiqueta ya no usamos el atributo src.
Creamos tantas etiquetas sources como formatos de video deseemos poner a disponibilidad, de todas formas, el navegador solo mostrará uno. Ej:
<video controls preload="auto">
<source src="./video/pandora.mp4#t=10,50">
<source src="./video/pandora.mov#t=10,50">
</video>
La etiqueta <video> va dentro de <body> quedando semánticamente correcto de la siguiente forma:
<body>
<main>
<section>
<video src=“./episodio4.m4v”></video>
</section>
</main>
</body>
</html>
Hay dos atributos para nuestra etiqueta <video> y uno de ellos es controls este hará que abajo de nuestro video nos salga la barrita de duración de video, el play y pausa.
Otro atributo es preload es importante, nos ayuda a que el video se renderice desde que la pagina se empieza a crear en el navegador, esto es para no tener mucho tiempo de espera y el usuario pueda verlo en cuanto desee.
El atributo preload=“auto” es para que el navegador empiece a descargar el video cuando haya una etiqueta de video. Esto no quiere decir que el video se va a reproducir solo, quiere decir que el video esta listo para que el usuario lo vea cuando quiera y no tenga que esperar a que este se descargue.
<video src=“./episodio4.m4v” controls preload=“auto”></video>
Si quieres que un video se reproduzca o pare de reproducir en un minuto/segundo especifico haremos lo siguiente: vamos a poner en la misma etiqueta de <video> en la parte de src=“” #t=10,60”
Quedando así:
<video src=“./episodio4.m4v#t=10,60” controls preload=“auto”></video>
Quedaría realmente como una extensión de src poniendo #(gato/numeral) seguido de una t que significa tiempo seguido del segundo/minuto en el quiero que empiece mi video en este caso 10 de 10 segundos luego ponemos una coma (,) y el tiempo en el que queremos que pare nuestro video en este caso 60 de 60 segundos.
¿Qué pasa si tengo diferentes formatos de video?
Con la etiqueta de <source> lo que haremos es decirle al video diferentes fuentes quedando de la siguiente forma:
<video controls preload=“auto”>
<source src=“./episodio4.m4v#t10,60”/>
</video>
Y si queremos agregar diferentes formatos de video podemos usar <source> varias veces por ejemplo:
<video controls preload=“auto”>
<source src=“./episodio4.m4v#t10,60”/>
<source src=“./episodio4.mp4#t10,60”/>
</video>
Dejando así nuestras etiquetas de <source> el navegador decide en qué formato renderizar el video.
para poner que el video inicie en un tiempo determinado y que termine igual, el codigo es: src="video.mp4#t=a,z; donde a es donde empieza y z dond termina
#t=10,60
Para insertar un video usamos la etiqueta <video> que también cuenta con atributos, el primero de ellos es src que funciona igual que el de img.
¿Cómo lo podemos reproducir?
Para eso existen otros atributos para la etiqueta de video estos son:
Existe una parte más, que es importante en las etiquetas de video y esta se da cuando tú tienes un video largo que quieres que se reproduzca en un momento en específico. Esto se coloca en la parte de src y es como una extensión de esta misma. Se coloca al final un “#t=” seguido de dos valores, el primero de ellos será el minuto que queremos que empiece a reproducirse el video, y el segundo será el minuto que queremos que se deje de reproducir el video . Pj. src="./video.mp4#t=1,4" ←-Quiero que inicie en el segundo 1 y se detenga en el segundo 4.
¿Qué pasa si tengo diferentes formatos de video?
Puede ser que los navegadores no entiendan diferentes formatos, para ello usaremos la etiqueta <source> en medio de las de video, y esta lo que hará es que le vamos a dar al video diferentes fuentes. Al usar esta quitamos el atributo src de <video> y lo pondremos en la de <source> (los demás se quedan igual). De esta manera podemos poner varias alternativas de formatos dejándole la decisión al navegador.
NOTA: Si el navegador entiende uno o más formatos elegirá el primero
Los formatos de video que admite actualmente HTML 5 son
mp4 = H.264 + AAC
.ogg/.ogv = Theora + Vorbis
.webm = VP8 + Vorbis
más info sobre las etiquetas multimedia https://www.um.es/docencia/barzana/DAWEB/2017-18/daweb-tema-5-multimedia-en-html.html
Aun me acuerdo del manejo de videos en el difunto Flash.
Para añadir video utilizamos la etiqueta <video></video> algunos atributos son:
controls añade los controles básicos para manipular un video
src: Fuente, puede ser en tú computadora o por internet
preload=auto : Permite que se vaya cargando antes de dar play al video.
Anotaciones:
---------------------
Gracias por tu explicación…
Si no saben como insertar un video de YouTube denle en compartir y luego en insertar </>
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<main>
<section>
<!-- src es la ubicacion local de nuestro video
controls es para asignarle controladores al vieo como play o pausa
preload es para que el video empieze a cargar desde que entras a la pagina
-->
<video src="./videos/0124.mp4" controls preload="auto"></video>
</section>
<!--#t=10,15 si tienes un video largo y quisieras reproducirlo desde un minuto
especifico existe una manera
se le agrega esta secuencia al source #t=10,15 esto significa que
empezara a reproducir en el segundo 10 hasta el 15-->
<section>
<video src="./videos/0124.mp4#t=10,15" controls preload="auto"></video>
</section>
<!-- si tuvieras diferentes formatos de video por ejemplo mp4, m4v, etc
muchos navegadores no entienden todos los formatos
entonces hacemos este codigo en el cual solo se coloca los atributos de controls
y preload y la ruta de los videos abajo en etiquetas llamadas source. de esta manera dejamos que el
navegador utilize el video que pueda renderizar-->
<section>
<video controls preload="auto">
<source src="./videos/0124.mp4"/>
<source src="./videos/0124.m4v"/>
<source src="./videos/0124.mp3"/>
<source src="./videos/0124.flv"/>
</video>
</section>
</main>
</body>
</html>
No tenía un video descargado, así que lo hice con un video de YouTube.
<body>
<main>
<section>
<video controls preload="auto">
<source src="./8_Final Render.mp4#t=3,6">
<source src="./8_Final Render.mp4#t=3,6">
<source src="./8_Final Render.m4v#t=3,6">
</video>
</section>
</main>
</body>
</html>
Hola compañeros les quería compartir un link donde puede ver un uso de la etiqueta <video> y la etiqueta <source>, también podrás ver los atributos nombrados en la clase y otros no nombrados, allí te explicaran que función tiene cada uno espero les sirva esta información.
https://lenguajehtml.com/html/multimedia/etiquetas-html-de-video/
Lo tuve que buscar en TikTok, aquí no me salía una vaina…
¡¡Genial!! A seguir aprendiendo.
Aquí un vídeo con una miniatura de un huron con el atributo poster
<video src="./video/XZKY2151.MP4#t=0,2" controls preload = “auto”>
<source src="">
</video>
preload—hace que el video se cargue más rápido.
t=0,2 empieza en 0 y termina en segundo 2.
<source> - le damos al video diferentes fuentes
¡¡Simplemente Extraordinario!!
Permite añadir videos a la webpage, el atributo controls añade los típicos controles de un vídeo, es muy importante ponerlo, también el atributo preload que renderiza el video al cargar la página web para mayor velocidad, pero no lo reproduce automáticamente
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?