Vídeo HTML: una guía para principiantes

No es ningún secreto que los videos son una forma poderosa de involucrar a los visitantes del sitio y atraerlos a su contenido. Ya sea que se trate de una pieza de contenido destacado con fines educativos o un fondo de pantalla completa destinado a la decoración, los videos son una de las mejores formas de mejorar su sitio web.

Es por eso que HTML5 introdujo el elemento de video, una forma simple de incrustar contenido de video en un sitio web. El video HTML es fácil de usar e incluye una función integrada para personalizar cómo funciona el video en la página. En esta publicación, le diremos lo que necesita saber sobre el uso de este elemento HTML, que incluye:

Empecemos.

Así es como se ve el elemento de video cuando se coloca en la página:

Cómo incrustar un video en HTML

Para incrustar un video en un documento HTML, use el botón etiqueta dentro del cuerpo del documento. Aquí hay un ejemplo:

ver la pluma Vídeo HTML: ejemplo por HubSpot (@hubspot) en CódigoPen.

Analicemos este ejemplo:

Primero, la etiqueta de video debe identificar la fuente del video. Esto se puede hacer con origen atributo en el agujero (como se muestra arriba) o colocando uno o más <źródło> etiquetas dentro etiqueta como esta:

 
<video controls width="300">
    <source src="https://blog.hubspot.com/website/video.mp4" type="video/mp4">
    <source src="https://blog.hubspot.com/website/video.webm" type="video/webm">
    This browser does not support HTML video.
</video>

Por <źródło> Las etiquetas son ideales si desea incrustar el mismo video en múltiples formatos para compatibilidad entre navegadores. cuando mucho <źródło> Si se usan etiquetas, el navegador mostrará el video en el primer formato compatible de la lista.

También especifiqué un ancho y aumentar para el elemento de video de píxeles para garantizar que el video se muestre en las dimensiones que desea, y lo adjunté control S atributo para permitir al usuario pausar, reproducir y ajustar el volumen del video.

Notarás que hay texto anidado en el cuadro. artículo también. Texto libre entre abrir y cerrar Las etiquetas solo aparecen si el elemento de video no es compatible con el navegador. En este caso, el texto se muestra en lugar del reproductor de video.

Finalmente, tenga en cuenta que es un elemento incorporado de forma predeterminada, pero a menudo se cambia a un elemento de bloque usando la propiedad de visualización en CSS. Esto puede facilitar el trabajo con video en un diseño de página existente.

Atributos de vídeo HTML

En el ejemplo anterior, ya hemos cubierto algunos atributos de video HTML. Aquí, cubriremos todos los atributos principales que necesita saber para usar este elemento de manera efectiva.

Reproducción automática

los Reproducción automática el atributo hace que el video se reproduzca sin intervención del usuario tan pronto como el contenido del video esté cargado y listo. Este comportamiento es típico de los sitios web que usan un video de fondo que comienza tan pronto como se carga la página.

Los videos con audio no deben reproducirse automáticamente, ya que esto puede sorprender y distraer a los espectadores. También presenta el problema de la accesibilidad. Por este motivo, los navegadores web Chromium no permiten que las películas con audio se reproduzcan automáticamente. Si desea reproducir un video automáticamente, debe silenciarlo siempre que sea posible. Si el audio es importante, puede dar a los usuarios la opción de reactivar el video.

Al igual que muchos otros atributos de video HTML, AutoPlay es un atributo lógico, lo que significa que solo puede ser verdadero o falso. Para usar un atributo, simplemente agregue Reproducción automática dentro de la abertura etiqueta.

control S

control S es otro atributo lógico que, cuando se incluye, muestra controles en el reproductor de video que permiten al usuario cambiar la reproducción, el volumen, etc.

círculo

Cuando círculo el atributo está incluido, el video se reiniciará automáticamente cuando llegue al final y se repetirá indefinidamente.

apagado

los apagado el atributo silencia el sonido del video. Esto es muy recomendable para la reproducción automática de videos con audio. Si los controles están habilitados, el usuario puede reactivar el video.

jugando en línea

los jugando en linea el atributo hace que el video se reproduzca en el contexto de la página web. Este es el comportamiento predeterminado en los navegadores de las computadoras. Sin embargo, en los navegadores móviles, el video se reproducirá en modo de pantalla completa. jugando en linea lo previene

póster

póster especifica la imagen que se muestra en el área de video antes de que el usuario inicie el video. Si póster el atributo no está incluido, el navegador mostrará el primer cuadro del video como una imagen de póster.

precargar

precargar es un atributo usado con y elementos. Le dice al espectador qué datos se pueden cargar antes de reproducir el video para ahorrar tiempo de carga. Toma uno de los siguientes valores:

• automático: El navegador puede cargar la película completa cuando la página se carga inicialmente.
• metadatos: El navegador solo puede cargar metadatos de video durante la carga inicial de la página.
• No: El navegador no debe cargar video durante la carga inicial de la página.

origen

los origen el atributo especifica la fuente de video. Debe especificar la fuente de cada elemento, o z origen o usando <źródło> elemento anidado dentro .

Anchura y altura

Estos atributos especifican el ancho y el alto de la pantalla de video en píxeles (porcentajes no permitidos). Incluido ancho valor y/o un aumentar El valor evita el contenido que se desplaza a medida que se carga la página.

Fuente de vídeo HTML5

los item admite tres formatos de video: MP4, WebM y Ogg. Sin embargo, no todos los navegadores web admiten los tres formatos.

Para asegurarse de que el contenido del video se muestre correctamente en diferentes navegadores, puede especificar varias fuentes de video con el botón <źródło> etiqueta. Anida el tuyo <źródło> etiquetas dentro elemento, y el espectador reproduce el primer formato compatible.

 
<video>
    <source src="https://blog.hubspot.com/website/video.mp4" type="video/mp4">
    <source src="https://blog.hubspot.com/website/video.webm" type="video/webm">
    <source src="https://blog.hubspot.com/website/video.ogg" type="video/ogg">
</video>

Disponibilidad de vídeo HTML

Al incorporar cualquier tipo de medio, considere las mejores prácticas de accesibilidad que permitan a los usuarios con discapacidades y limitaciones interactuar con su contenido tanto como otros usuarios. Aquí hay algunas cosas a tener en cuenta al crear contenido de video accesible.

Sonido

Como se mencionó, no reproduzca videos con audio automáticamente siempre que sea posible. A la gente generalmente no le gusta cuando un sitio web comienza a reproducir audio sin previo aviso. El audio en los videos está bien, pero los usuarios deberían poder activarlo presionando el botón de reproducción o desactivando el silencio de un video de reproducción automática.

Subtítulos y subtítulos

Tanto los subtítulos como las leyendas proporcionan una alternativa de texto al sonido del video. La diferencia es que los subtítulos traducen el idioma hablado en el video a un idioma diferente, mientras que los subtítulos muestran el idioma hablado junto con otra información que ayuda a las audiencias con discapacidad auditiva a comprender el contenido.

Para que un video esté disponible, debe contener subtítulos. El método más común para agregar subtítulos a un video HTML es usar elemento con el estándar WebVTT. Para obtener más información, Mozilla tiene una excelente guía para agregar leyendas y subtítulos al video HTML5.

vídeo y audio

También es posible reproducir archivos de audio con elemento. Esta es una forma común de agregar subtítulos o subtítulos al contenido de audio, ya que es HTML nativo. elemento no permite texto temporal.

Sin embargo, al incrustar sonido, casi siempre es mejor usar para brindar una mejor experiencia a las personas que usan lectores de pantalla.

Presione reproducir en video HTML.

Antes de HTML5, las películas se incrustaban en páginas Flash. Por supuesto, Flash se ha eliminado casi por completo, con la es un método más nuevo y conveniente para colocar videos. Al comprender cómo funciona el video HTML, puede usar este poderoso elemento para crear una experiencia rica para sus visitantes y, en última instancia, aumentar la cantidad de conversiones en su sitio web.