La etiqueta HTML `video`

 

 

 

La etiqueta html video 1

 

Descubra los conceptos básicos para trabajar con la etiqueta `video` de HTML

La videoetiqueta le permite incrustar contenido de vídeo en sus páginas HTML.

Este elemento puede transmitir video mediante una cámara web a través getUserMedia()de WebRTC , o puede reproducir una fuente de video a la que haga referencia mediante el srcatributo:

video src="file.mp4" /

Por defecto el navegador no muestra ningún control para este elemento, solo el vídeo.

Lo que significa que el audio se reproducirá solo si está configurado para reproducción automática (más sobre esto más adelante) y el usuario no puede ver cómo detenerlo, pausarlo, controlar el volumen o saltar una posición específica en el video.

Para mostrar los controles integrados, puede agregar el controlsatributo:

video src="file.mp4" controls /

Así es como se ve en Chrome:

La imagen mostrada inicialmente es el primer fotograma del vídeo.

Puedes mostrar otra imagen, lo cual es una necesidad bastante común, usando el posteratributo:

video src="video.mp4" poster="image.png" controls /

Si no está presente, el navegador mostrará el primer fotograma del vídeo tan pronto como esté disponible.

Puede especificar el tipo MIME del archivo de vídeo mediante el typeatributo. Si no se configura, el navegador intentará determinarlo automáticamente:

video src="file.mp4" controls type="video/mp4" /

Un archivo de vídeo no se reproduce automáticamente de forma predeterminada. Agregue el autoplayatributo para reproducir el audio automáticamente:

video src="file.mp4" controls autoplay /

Algunos navegadores también requieren el mutedatributo de reproducción automática. El video se reproduce automáticamente solo si está silenciado:

audio src="file.mp3" controls autoplay muted /

El loopatributo reinicia la reproducción del video a las 0:00 si está configurado, de lo contrario, si no está presente, el video se detiene al final del archivo:

video src="file.mp4" controls autoplay loop /

Puedes configurar los atributos widthy heightpara establecer el espacio que ocupará el elemento, de modo que el navegador pueda tenerlo en cuenta y no cambie el diseño cuando finalmente se cargue. Toma un valor numérico, expresado en píxeles.

 

CORS

El video está sujeto a CORS y, a menos que lo permita en el lado del servidor, un video no se puede reproducir en todos los orígenes.

No pasa nada si pones esta etiqueta en una página web. No hay forma de iniciar el vídeo y no se reproduce de forma autónoma. Para que el vídeo se reproduzca, debes añadir el autoplayatributo: Fotos Porno y actrices porno

video src="video.mp4" autoplay /

Cambiar las propiedades de visualización del vídeo

Puede establecer un ancho y una altura para el área de video, expresados ​​en píxeles, utilizando los atributos widthy height:

video src="video.mp4" poster="image.png" controlsheight="600"width="800" /

Mostrar contenido si videono es compatible

La videoetiqueta tiene un gran soporte hasta en IE9, por lo que hoy en día no debería ser necesario tener un texto de marcador de posición, pero tenemos esta opción. Solo hay que añadir una etiqueta de cierre e insertar texto entre la etiqueta de apertura y la de cierre:

video src="video.mp4"Video tag not supported/video

Agregar múltiples fuentes

Los navegadores pueden implementar un códec de video, pero no otro. Tal vez desee utilizar un estándar más nuevo que reduzca el tamaño del archivo a la mitad, pero aún así desee admitir navegadores más antiguos.

Lo haces con la sourceetiqueta:

video controls source src="video.mp4" type="video/mp4" / source src="video.avi" type="video/avi"//audio

Puedes diseñar controles usando CSS, aunque esto está fuera del alcance de esta introducción.

Precarga del vídeo

Si no lo configura autoplay, la especificación dice que los navegadores solo descargarán los metadatos del video (para saber la duración, por ejemplo), pero no descargarán el video en sí.

Puedes forzar la precarga del video usando

video src="video.mp4" preload="auto" /

Trabajar con eventos de vídeo

Podemos escuchar eventos en cada videoelemento usando JavaScript para crear proyectos e interfaces interesantes. Hay muchos eventos diferentes con los que podemos jugar.

El playevento se activa cuando comienza la reproducción del vídeo:

document.querySelector('video').addEventListener('play', () = { alert('Video is playing!!!')})

También puedes agregar directamente este evento (como los demás) usando el oneventatributo directamente en el elemento HTML:

video src="video.mp4" controls onplay="playing()" /
const playing = () = { alert('Video is playing!!!')})

Estos son algunos eventos que puedes escuchar:

  • playEl vídeo empezó a reproducirse
  • pauseEl video fue pausado
  • endedReproducción de vídeo completada
  • timeupdateEl usuario interactuó con la línea de tiempo de reproducción y avanzó o retrocedió.
  • volumechangeEl usuario cambió el volumen

Hay muchos más eventos relacionados con la carga de video, y puedes encontrar la lista completa en MDN .

Tips de HTML




Tal vez te puede interesar:

  1. La etiqueta HTML `iframe`
  2. Cómo cargar una imagen en un lienzo HTML
  3. Cómo utilizar insertAdjacentHTML
  4. Cómo cambiar la URL de una imagen HTML en modo oscuro

La etiqueta HTML `video`

CORSCambiar las propiedades de visualización del vídeoMostrar contenido si videono es compatibleAgregar múltiples fuentesPrecarga del vídeoTrabajar con eve

programar

es

https://aprendeprogramando.es/static/images/programar-la-etiqueta-html-video-2098-0.jpg

2024-10-15

 

La etiqueta html video 1
La etiqueta html video 1

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences