现在如果要在页面中使用 Video 标签 ， 需要考虑三种情况 ， 支持 支持 Ogg Theora 或者 VP8 （如果这玩意儿没出事的话）的（ Opera 、 Mozilla 、 Chrome） 支持 支持 H.264 的（ Safari 、 es decir, 9 、 Chrome) no es compatible (es decir, 7, 8). Bueno, comprendamos el video HTML 5 desde el nivel técnico, incluido el uso de etiquetas de video, los atributos de los medios y los métodos que los objetos de video pueden usar y los eventos de medios.
Uso de la etiqueta de videoLas etiquetas de video contienen SRC, póster, precarga, autoplaz, bucle, controles, ancho, altura y otros atributos, así como una etiqueta <Velente> utilizada internamente. Además de la etiqueta <uror>, la etiqueta de video también puede incluir el contenido devuelto cuando no se puede reproducir el video especificado.
(1) Atributos SRC y atributos de Poser¿Te imaginas para qué se usa el atributo SRC? Al igual que la etiqueta <MG>, este atributo se usa para especificar la dirección del video. El atributo de póster se utiliza para especificar una imagen, que muestra (diagrama de vista previa) cuando los datos de video actuales no son válidos. Los datos de video no válidos pueden ser que el video se está cargando, que puede ser el error de la dirección de video.
<Video Width = 658 Height = 444 src = http: //www.youname.com/images/first.mp4 póster = http: //www.youname.com/images/first.png toplay> </video>(2) Atributo de precarga
Este atributo también se puede entender a través del nombre. Hay tres valores opcionales: ninguno, metadatos, auto. Si no se usa este atributo, el valor predeterminado es automático.
<Video Width = 658 Height = 444 src = http: //www.youname.com/images/first.mp4 cartel = http: //www.youname.com/images/first.png toplay preload = none> </video >
Ninguno: sin pre -carga. El uso de este valor de atributo puede ser que los productores de la página crean que los usuarios no esperan este video o reducen las solicitudes HTTP.
Metadatos: pre -carga parcial. Usando este valor de atributo, el productor de la página cree que los usuarios no esperan este video, sino que proporcionan a los usuarios algunos metadatos (incluido el tamaño, el primer cuadro, la lista de seguimiento, la duración, etc.).
AUTO: TODO PRELOGA.
(3) Atributo automáticoOtro atributo que depende del nombre sabe el propósito. El atributo Autoplay se usa para establecer el video si el video se reproduce automáticamente, que es un atributo booleano. Cuando aparece, significa que la reproducción automática, lo que significa que no juega.
<Video Width = 658 Height = 444 src = http: //www.youname.com/images/first.mp4 cartel = http: //www.youname.com/images/first.png toplay preload = none> </video >
Tenga en cuenta que el valor de los atributos booleanos en HTML no es verdadero y falso. El uso correcto es que el uso de este atributo en la etiqueta indica verdadero. ));
(4) Atributo de bucle<Video Width = 658 Height = 444 src = http: //www.youname.com/images/first.mp4 póster = http: //www.youname.com/images/first.png toplay loop = bucle> </video >
Está claro de un vistazo que el atributo de bucle también se usa para especificar si se distribuye el video, que también es un atributo booleano.
(5) Atributo de control<Video Width = 658 Height = 444 src = http: //www.youname.com/images/first.mp4 poster = http: //www.youname.com/images/first.png toplay preload = none controls = controls> </Video>
Los atributos de controles se utilizan para indicar al navegador para indicar que el productor de la página no usa un script para generar un controlador de reproducción, y el navegador debe usar la barra de control de reproducción.
La barra de control debe incluir el control de pausa de juego, el control de progreso del juego, el control de volumen, etc.
La barra de control de reproducción predeterminada de cada navegador es diferente en la interfaz. Debido a los extraños problemas de mi navegador, la etiqueta de video de Firefox y Safari no es normal, por lo que estos dos solo pueden encontrar capturas de pantalla en línea.
(6) Atributos de ancho y atributos de alturaEl atributo universal pertenece a la etiqueta, por lo que no hay necesidad de decir esto.
(7) Etiqueta de fuente<Video Width = 658 Height = 444 Poster = http://www.youname.com/images/firs/png autoplay = autoplay preload = none controles> <fuente s> <fuente s rc = http: //www.youname. com/images /firtst.ogv/> <Source src = http://www.youname.com/images/first.ogg/> </video>
La etiqueta de origen se usa para especificar múltiples opciones (porque las etiquetas de audio también pueden incluir esta etiqueta, por lo tanto, use los medios en lugar de video) (el navegador solo puede elegir una al final) usar cuando se usa los atributos SRC.
El navegador puede detectar si el video especificado por la etiqueta de origen se puede reproducir (tal vez el formato de video no es compatible, el video no existe, etc.). Este método se usa principalmente para diferentes navegadores. La etiqueta de origen en sí no significa ningún significado y no puede aparecer solo.
Esta etiqueta incluye tres atributos: SRC, Tipo y Medios.
Atributos SRC: se utiliza para especificar la dirección de los medios, lo mismo que la etiqueta de video.
Atributo de tipo: se utiliza para explicar el tipo de medios especificados del atributo SRC, ayudando al navegador a determinar si admite dicho formato de medios antes de obtener los medios.
Atributos de los medios: se usa para explicar dónde se usan los medios en el medio, y el valor predeterminado es todo cuando no está configurado, lo que significa admitir todos los medios. ¿Piensas en el atributo de medios de la etiqueta <style>? Lo mismo.
(8) Un ejemplo completo<Video Width = 658 Height = 444 Poster = http://www.youname.com/images/firs/png autoplay = autoplay preload = none controles> <fuente s> <fuente s rc = http: //www.youname. com/images /firtst.ogv/> <Source src = http://www.youname.com/images/first.ogg/> </video>
Este código define un video en la página. píxeles, la altura de 240 píxeles esencia
La primera selección de la dirección de video de la primera etiqueta de origen, el valor del atributo SRC, la categoría de video es el video OGG, el decodificador de codificación de video es teora, el decodificador de codificación de audio es vorbis, el medio de reproducción es la pantalla del segundo seleccionar el video; La dirección ya no es que la dirección de video ya no esté cansada. Si tiene que ser compatible con IE, puede agregar el conjunto de etiquetas del reproductor Flash después de la última etiqueta de origen, o usar un pequeño código JavaScript.
ResumirLo anterior es un resumen del método para insertar el video en la página web HTML introducida por Xiaobian. ¡Muchas gracias por su apoyo al sitio web de VEVB Wulin!