Usar vídeo como fondo de página H5
El método de usar directamente archivos en formato .FLV como fondo de la página no estaba muy claro en Internet. De repente pensé en usar la nueva etiqueta de video H5, así que encontré una manera de usar el video como. la página H5:
(1) Primero cree una nueva página H5 con una etiqueta de video y escriba la etiqueta de video en la dirección del enlace del video en el archivo fuente (ponga primero el archivo de demostración en formato MP4). archivo de demostración en formato MP4).
Lo que ves en esta página en el navegador Chrome es una imagen estática. Añade el atributo de reproducción automática al vídeo, más el atributo de bucle, y no es necesario silenciar el atributo de sonido, para que el vídeo se reproduzca. ser colocado.
(2) En este momento, el video no cubrirá toda la pantalla. Al agregar el estilo margin:0 autol en el texto, el video cubrirá toda la página horizontalmente y luego agregará un estilo; vídeo para que sirva como fondo de la página.
Entre ellos, z-index: -99 se usa para establecer la horizontalidad del video y -webkit-filter:graycale(100%) se usa para configurar el atributo de escala de grises del video. Cuanto mayor sea el porcentaje, mayor será el valor de la escala de grises.
(3) Después de que la prueba anterior sea correcta, confirme que el atributo de video se puede usar como fondo de la página de video H5 y luego verifique los formatos de video que la etiqueta de video puede reproducir actualmente. El elemento
Al cumplir con los requisitos anteriores, se resumen varios aspectos de los atributos de la etiqueta de video:
1. Compatibilidad con navegador:
Navegador de navegación de versión IE9 y superior, Chrome 4 y superior, FF 3.5 y superior, safari 4.0 y superior, navegador Opera
10.5 y superior;
2. El elemento
MP4, WebM y Ogg. Pero todos los navegadores parecen tener el mejor soporte para el formato MP4.
Formato MP4 MIME-tipo=video/mp4
Formato WebM MIME-tipo=video/WebM
Formato Ogg MIME-tipo=video/Ogg
3. Atributos opcionales del video
(1) atributo src y atributo poster: los atributos de ancho y alto del atributo de video se utilizan para establecer los atributos de ancho y alto del video, y el atributo src se usa para introducir la ruta del video, el cartel se usa para especificar una imagen como portada del video.
(2) atributo de precarga
Este atributo se utiliza para definir si el vídeo está precargado. Esta propiedad tiene tres valores opcionales: Ninguno, Metadatos y Automático.
Ninguno: Sin precarga. El motivo para utilizar este valor de atributo puede ser que el autor de la página crea que el usuario no espera el vídeo o para reducir las solicitudes HTTP.
Metadatos: Precarga parcial. El uso de este valor de atributo significa que el autor de la página asume que el usuario no espera un vídeo, pero le proporcionará algunos metadatos
(incluido el tamaño, el primer fotograma, la lista de pistas, la duración, etc.).
Automático: todo precargado
(3) Atributos de control
controles="controls" indica si se requiere una barra de control, que debe incluir control de reproducción y pausa , control de progreso de reproducción, control de volumen, etc.
(4) atributo de bucle
De un vistazo, el atributo de bucle especifica si el vídeo se reproduce en un bucle. También es un atributo booleano.
(5) atributo de reproducción automática
El atributo de reproducción automática se utiliza para especificar si el vídeo se reproduce automáticamente. También es un atributo booleano. Cuando existe, significa que se reproducirá automáticamente. Cuando se elimina, significa que no se reproducirá automáticamente.
(6) etiqueta de origen
La etiqueta de origen se utiliza para especificar múltiples direcciones de archivos seleccionables para los medios (el navegador solo puede seleccionar una al final) (porque la etiqueta de audio también puede contiene esta etiqueta, por lo que eso es lo que se usa aquí, no el video), y solo se puede usar cuando la etiqueta multimedia no tiene un atributo src. Esto es para evitar que el navegador reproduzca un formato mientras reproduce otro formato en el mismo archivo.
Esta etiqueta contiene atributos src, type y media.
atributo src: se utiliza para especificar la dirección del medio, al igual que la etiqueta del vídeo.
Atributo de tipo: se utiliza para especificar el tipo de medio especificado por el atributo src, lo que ayuda al navegador a determinar si la categoría es compatible antes de recuperar el medio.
Propiedades del medio: Se utiliza para especificar el medio en el que se utiliza el medio. Cuando no se establece, el valor predeterminado es all, lo que indica que se admiten todos los medios. ¿Has considerado los atributos multimedia de la etiqueta