Antes de HTML5, para poder reproducir un video en una página web, necesitaría usar un complemento como Adobe Flash Player. Con la introducción de HTML5, ahora puede colocar videos directamente en la propia página.
Esto hace posible que los videos se reproduzcan en páginas diseñadas para dispositivos móviles, ya que los complementos como Adobe Flash Player no funcionan en Android o iOS.
El elemento HTML se utiliza para incrustar video en documentos web. Puede contener una o más fuentes de video, representadas mediante el srcatributo o el elemento fuente.
Para incrustar un archivo de video, simplemente agregue este fragmento de código y cambie srca la ruta de su archivo de video:
Your browser does not support the video element. Kindly update it to latest version. El elemento es compatible con todos los navegadores modernos. Sin embargo, no todos los navegadores admiten el mismo formato de archivo de video. Los archivos MP4 son el formato más aceptado, y otros formatos como WebM y Ogg son compatibles con Chrome, Firefox y Opera.
Para asegurarse de que su video se reproduzca en la mayoría de los navegadores, es una buena práctica codificarlos en formatos Ogg y MP4, e incluir ambos en el elemento como en el ejemplo anterior. Los navegadores utilizarán el primer formato reconocido.
Si por alguna razón el navegador no reconoce ninguno de los formatos, se mostrará el texto "Su navegador no es compatible con el elemento de video. Actualícelo a la última versión".
También es posible que lo hayas notado controlsen la etiqueta. Este elemento incluye muchos atributos útiles para personalizar la experiencia de reproducción.
controls
El controlsatributo controla si aparecen controles como el botón de reproducción / pausa o el control deslizante de volumen.
Este es un atributo booleano, lo que significa que se puede establecer en verdadero o falso. Para establecerlo en verdadero, simplemente agréguelo a la etiqueta. Si no está presente en la etiqueta, se establecerá en falso y los controles no aparecerán.
autoplay
"autoplay" se puede establecer en verdadero o falso. Lo establece en verdadero agregándolo a la etiqueta, si no está presente en la etiqueta, se establece en falso. Si se establece en verdadero, el video comenzará a reproducirse tan pronto como se haya almacenado en búfer lo suficiente para que pueda reproducirse. Muchas personas consideran que la reproducción automática de videos es perturbadora o molesta. Así que use esta función con moderación. También tenga en cuenta que algunos navegadores móviles, como Safari para iOS, ignoran este atributo.
Este es otro atributo booleano. Al incluirlo autoplayen la etiqueta, el video incrustado comenzará a reproducirse tan pronto como se haya almacenado en búfer.
Tenga en cuenta que muchas personas consideran que la reproducción automática de videos es perturbadora o molesta, así que use esta función con moderación. También tenga en cuenta que algunos navegadores móviles como Safari para iOS ignoran este atributo por completo.
poster
El posteratributo es la imagen que se muestra en el video hasta que el usuario hace clic para reproducirlo.
Los videos pueden ser costosos
Si bien es más fácil que nunca incluir videos en su página, a menudo es mejor subir sus videos a un servicio como YouTube, Vimeo o Wistia e incrustar su código en su lugar. Esto se debe a que ofrecer videos puede resultar costoso, tanto para usted en términos de costos de servidor como para sus espectadores si tienen planes de datos limitados.
Alojar sus propios archivos de video también puede ocasionar problemas con el ancho de banda, lo que podría significar la tartamudez de los videos de carga lenta. Además de eso, los navegadores tienden a variar en calidad cuando se trata de reproducción de video, por lo que es difícil controlar exactamente lo que verán los espectadores. También es muy fácil descargar videos incrustados con la etiqueta, por lo que si le preocupa la piratería, es posible que desee buscar otras opciones.
Y con eso, continúe e inserte videos al contenido de su corazón. O no, es tu decisión.