Web Developer Fundamentals

1

Qu茅 aprender谩s sobre HTML y CSS

2

驴Qu茅 es el Frontend?

3

驴Qu茅 es Backend?

4

驴Qu茅 es Full Stack?

5

P谩ginas Est谩ticas vs. Din谩micas

HTML

6

HTML: anatom铆a de una p谩gina web

7

Index y su estructura b谩sica: head

8

Index y su estructura b谩sica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatom铆a de una etiqueta de HTML

Etiquetas multimedia

11

Tipos de im谩genes

12

Optimizaci贸n de im谩genes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

CSS

21

驴Qu茅 es CSS?

22

驴C贸mo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatom铆a de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

M谩s sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desaf铆o: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas pr谩cticas y ejemplos de responsive

50

Im谩genes responsive

Accesibilidad

51

Sem谩ntica

52

Textos

53

Labels, alt y title

Pr贸ximos pasos

54

Pr贸ximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Etiqueta video

15/55
Recursos

Aportes 352

Preguntas 170

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

La etiqueta <video>, tiene algunos atributos como:
.

  1. controls: agrega al video los controles necesarios para reproducir, pausar y adelantar.

  2. 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 + 鈥淒ireccional Abajo鈥

                        **隆Les comparto mi resumen!**

Controles y sem谩ntica b谩sica

  • La sem谩ntica y estructura de un video es la siguiente:
<video src="rutaVideo"></video>

    • En este caso podemos ver la previsualizaci贸n del video, pero si queremos agregarle controles al mismo, debemos agregarle el atributo controls, de esta forma:
<video src="rutaVideo" controls></video>

  • Por otro lado tenemos la etiqueta prelaod, la cual nos va a funcionar a que nuestro video se renderice mientras la p谩gina se cree en el navegador. 馃搲
<video src="rutaVideo" controls preload="auto"></video>

  • Adem谩s tenemos una opci贸n muy interesante a la hora de cargar un video, si quisieramos tener un minuto con segundo espec铆fico de inicio y uno del final lo podemos hacer de esta forma:
<video src="rutaVideo#t=1.06, 1.40" controls preload="auto"></video>

  • Si queremos colocar distintos formatos del video para tener una mayor compatibilidad con los distintos navegadores, podemos usar la etiqueta source de esta forma.
<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 鈥淟ive 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 鈥減oster鈥 para poder ver una imagen antes de reproducir el video y 鈥渇igcaption鈥 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.

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=鈥漚uto鈥 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>

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=鈥漚uto鈥: 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.

Carajo estoy adicto a Platzi, me estreso si no estoy metido aqu铆

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!!

Clase 15 - Etiqueta video


驴Para qu茅 nos sirve la etiqueta <video>?

  • Esta etiqueta nos permite agregar videos a nuestra p谩gina web. Por medio del atributo src es que podemos agregar la ruta o ubicaci贸n del video.
  • Sintaxis
<video src="#"> </video>

驴Cu谩l es es el atributo que necesita la etiqueta video para funcionar correctamente?

  • El atributo controls. Este atributo lo que har谩 es que los controles de video aparezcan, de lo contrario solo se renderiza una imagen.
  • Sintaxis:
<video src="#" controls> </video>

驴Para qu茅 nos sirve el atributo preload=鈥渁uto鈥?

  • Esto hace que el navegador empiece a cargar el video para que el usuario no tenga que esperar mucho tiempo para ver el video cuando 茅l lo desee鈥
  • Sintaxis
<video src="#" controls preload="auto"> </video>

驴C贸mo podemos configurar el tiempo (segundos o minutos) en el que queremos que el video se reproduzca?

  • Seguido de la ruta o ubicaci贸n del archivo de video escribirnos lo siguiente:
  • Sintaxis:
<video src="./video/video.mp4#t=20,67" controls preload="auto">
  • Lo que estamos haciendo en este ejemplo es decirle al navegador que queremos que el video se empiece a reproducir desde el segundo 20 y se detenga en el segundo 68.

驴Para qu茅 nos sirve la etiqueta <source>?

  • Esta etiqueta nos permite agregar diferentes formatos de video dentro de la etiqueta <video>.
  • Sintaxis.
     <video controls preload="auto">
           <source src="./video/video.mp4">
           <source src="./video/video.m4v">
       </video>
  • Esto lo hacemos en caso de que alg煤n navegador en el que se renderiza la p谩gina web no admita uno de los formatos, entonces el navegador elegir谩 entre los formatos que hay y reproducir谩 el video que sea compatible.

驴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?

  • Tomar谩 el primero que hayamos puesto en la etiqueta <source>.

Agregar videos de YouTube en nuestra p谩gina.

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:
.

  1. autoplay : Se reproduce autom谩ticamente. MALA PR脕CTICA
  2. loop : Se vuelve se repite desde el inicio a penas termina.
  3. muted : Se mutea el video por defecto.
    .
    Fuente: https://htmlreference.io/element/video/

Hay una diferencia entre:

preload="auto"

y

preload="metadata"

auto renderiza el video completo cuando renderiza la pagina.
.
metadata renderiza al menos:

  • Dimensiones
  • Anchura
  • Altura
  • El primer cuadro del video
  • Un peque帽a parte del video en s铆

.
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

  • Video.js 鈫 Es un framework para hacer tu propio video con Js.
  • Flowplayer 鈫 Es una herramienta de multimedia muy completa, se pueden agregar atajos, reproduccion x2, x3, volumen, etc.

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.

  • preload=鈥漚uto鈥: permite cargar el video desde que el usuario entra a la p谩gina web.
  • preload=鈥漨etadata鈥: carga previa de los metadatos
  • preload=鈥漬one鈥: no existe carga del video previa.

La manera de usar el atributo preload es as铆.

<video src="fuente-del-video" controls preload="auto"></video>

Pero all铆 no termina la cosa.

Qu茅 pasar铆a si tenemos un un formato de video diferente? O tenemos varios formatos de video y el navegador no entiende uno pero otro s铆?

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 鈥淢UTED鈥 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

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=

鈥渁uto鈥 鈥渕etadata鈥 鈥減reload鈥

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>
  • Etiqueta<video>se utiliza para mostrar un video en una p谩gina web.
  • Atributo controls agrega controles de video, como reproducci贸n, pausa y volumen.
  • Atributo 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.
    • Tiene mayor jerarqu铆a que preload .
  • Atributo 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.
    • empty string: Sin贸nimo del valor autom谩tico.
  • Atributo muted se usa para establecer silencio al reproducir el video.
    • En algunos navegadores (por ejemplo, Chrome 70.0), la reproducci贸n autom谩tica no funciona si no hay ning煤n atributo silenciado.
  • Atributo widthy聽height.聽Si no se configuran la altura y el ancho, la p谩gina puede parpadear mientras se carga el video.
  • Etiqueta <source> elemento le permite especificar archivos de video alternativos que el navegador puede elegir.聽El navegador utilizar谩 el primer formato reconocido.
  • El texto entre las etiquetas聽<video>y聽</video>solo se mostrar谩 en navegadores que no admitan el聽<video>elemento.

La etiqueta聽<video>, tiene algunos atributos como:.

  1. controls:聽agrega al video los controles necesarios para reproducir, pausar y adelantar.
  2. preload = 鈥渁uto鈥:聽hace que el navegador descargue el video, en el momento en el que se acceda a la p谩gina.
  3. poster=鈥渋mg/pexels.jpg鈥: Agrega al video una miniatura, nos ayuda a cargar el vider mientras el usuario ve la miniatura.
  4. width=鈥500px鈥: Da un tama帽o al video
  5. 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.
  6. #t=2,3: agregarle #t al final de la URL nos ayuda a decirle al navegador en que parte del video comenzar y en que terminar, Ejem( 鈥#t=2,3鈥 aqu铆 comienza en el seg 2 y termina en el seg 3)
<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

  • .mp4 = H.264 + AAC
  • .ogg/.ogv = Theora + Vorbis
  • .webm = VP8 + Vorbis

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=鈥漚uto鈥 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>
  • El formato aceptado por la mayor铆a de navegadores es el .mp4.

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=鈥渁uto鈥 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=鈥渁uto鈥></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=鈥渁uto鈥></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=鈥渁uto鈥>
<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=鈥渁uto鈥>
<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

15.-Etiqueta video

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:

  • controls: ****que con solo ponerlo nos muestra controles para manipular el video (este es uno de los atributos que solo lleva una palabra).
  • preload: nos ayuda a que el video se empiece a renderizar cuando la p谩gina se empieza a crear en el navegador (para que no exista tiempo de espera y que el navegador lo descargue antes de que el usuario lo vea), esto no quiere decir que el video se va a reproducir solo (NO SON BUENAS PRACTICAS), el usuario es el que debe decidir si reproducirlo o no.

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

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.

Etiqueta video:

  • <video>: Etiqueta para insertar videos
  • controls:聽Agrega botones de reproducci贸n al video.
  • preload=鈥漚uto鈥:聽Comienza la precarga del video durante la primera carga de la web
  • #t=(min,seg,): Atributo para comenzar la reproducci贸n del video en un punto espec铆fico
  • <source>: Permite a帽adir dos o m谩s videos de distintos formatos dentro de una misma etiqueta (El navegador prioriza el primero)
<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 = 鈥渁uto鈥>
<source src="">
</video>

preload鈥攈ace 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!!

Etiqueta video

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

que bueno lo del #t= inicio,final
que bueno esto vieron que hay muchos videos que no arranca mas que hay un espacio de inicio como de 10 0 15 segundo con ya empieza el video en la mejor parte y sin esperar mucho

Para evitar que descarguen el v铆deo de tu p谩gina usar el atributo controlsList=鈥渘odownload鈥

Me encanta este curso, estoy re feliz poniendo v铆deos por todo lado jaja 馃ぃ馃ぃ馃ぃ

Apunte de la seleccion del tiempo de inicio

Aqui le voy agregando de apoco al SUPER