Cómo insertar un vídeo de reproducción automática en una página usando HTML5

Cuando navegas por el sitio web, ¿has notado que hay videos, audios, etc. en el sitio web? Amigos que están aprendiendo HTML y CSS, ¿saben cómo usar HTML5 para insertar videos en la página? y reproducirlos automáticamente? Este artículo le dirá cómo insertar videos en HTML5 y el código para insertar videos en HTML. Los amigos interesados ​​pueden consultarlo.

La etiqueta

Nota: El contenido de las etiquetas se utiliza para mostrarse en navegadores que no admiten la etiqueta de video.

Introducción a las etiquetas relacionadas con la inserción de vídeos:

Recursos utilizados para configurar el vídeo

se puede configurar en la pista de texto del reproductor multimedia

Nota: debe prestar atención a la compatibilidad del navegador al usarlo. La compatibilidad de la etiqueta

Ejemplo de demostración 1: Cómo usar html5 para insertar un vídeo en la página

Ejemplo detallado:

Primero cree el < video> etiqueta de video, establezca la duración del video en 300 px y la altura en 200 px, y luego use la etiqueta para introducir el video que debe insertarse. Preste atención a la ruta del archivo referenciado. El código es el siguiente:

Su navegador no soporta la etiqueta Vídeo.

Renderizado:

Ejemplo 2: Insertar un vídeo que se pueda reproducir automáticamente en la página

Sintaxis:

Para insertar un vídeo que pueda reproducirse automáticamente en la página, solo necesita agregar un atributo, es decir, el atributo de reproducción automática de la etiqueta

Su navegador no soporta la etiqueta de vídeo.

Después de agregar el atributo de reproducción automática de la etiqueta

Lo anterior le presenta el método HTML5 para insertar videos en páginas y cómo insertar videos que se pueden reproducir automáticamente. La explicación es detallada y más fácil de entender. Los principiantes pueden probarlo ellos mismos, buscar un vídeo e insertarlo en la página. Vea si su código puede lograr el efecto de reproducción automática. ¡Espero que este artículo le resulte útil!

Recomendaciones de tutoriales relacionados

1. Vídeo tutorial de HTML5

2. Manual de desarrollo de HTML

3. p>4. Efecto de animación de carga de página CSS