Formato de video común
HTML5 admite formato de video:
1. OGG
Archivo OGG con codificación de video Theora+Vorbis Audio Codificación
Navegador compatible: F, C, O
2. MEPG4
Archivo mpeg4 con codificación de video H.264+codificación de audio AAC
Navegador compatible: S, C
3, webm
Formato Webm con codificación de video VP8+codificación de audio Vorbis
Navegador compatible: i, f, c, o
Desventajas: pocos videos, casi sin transcodificadores, no son buenos para transcodificar
Si desea un video, puede llenar automáticamente el tamaño del Padre Slow Div, solo agregue el estilo = Width = 100%a la etiqueta de video = 100%;
1.2 prototipo de etiquetaEspecificar un formato de video.
<video id = medios src = examp.mp4 width = 500 póster = examp1.jpg> Su navegador no es compatible con Video </Video>
Dada una variedad de formatos de video, que el tipo de navegador elige reproducir de acuerdo con su propio grado
Nota: Múltiples etiquetas de origen, los navegadores se identificarán de la primera.<Video Controls = Controls> <Source src = 1.mp4 type = video/mp4/> // Las propiedades de SRC escriben en etiquetas de origen, para especificar el tipo de video, por ejemplo, el mp4 es type = video/mp4 <fuente de fuente Src = 2.gg type = video/ogg/> // format ogg <fuente src = 3.webm type = video/webm/> // format de webm </video>1.3 Atributo de etiqueta de video importante
| Atributo (comúnmente utilizado) | valor | Descripción de la función |
|---|---|---|
| Control | Control | Si mostrar el control de reproducción |
| autoplaz | autoplaz | Establezca si abrir el navegador y jugar automáticamente |
| ancho | Pilex (píxel) | Establezca el ancho del jugador |
| altura | Pilex (píxel) | Establecer la altura del jugador |
| bucle | bucle | Establezca el video si reproducir circularmente (es decir, continuar siendo reproducido después de la reproducción) |
| precargar | precargar | Establecer si esperar para cargar y luego jugar |
| SRC | Url | Establezca la dirección de URL para reproducir video |
| póster | imangurn | Establezca el reproductor inicialmente la imagen de visualización predeterminada |
| Aficionada | Aficionada | Establecer como un método de búfer de navegador, sin configurar AutoPly para que sea efectivo |
Atributo API
| propiedad | describir |
|---|---|
| Auditanos | Regrese al objeto AudioTrackList que puede ser utilizado por el riel de sonido |
| amortiguado | Regrese para indicar el objeto Timeranges de la parte del búfer del audio/video |
| Controlador | Regrese al objeto MediaController del controlador de medios actual de audio/video |
| Criatigia | Configuración o devolver la configuración de audio/video Cors |
| Corriente | Vuelva a la URL actual de audio/video |
| actual | Establezca o devuelva la posición de reproducción actual en el audio/video (en segundos) |
| DefaultMutem | Establecer o devolver audio/video predeterminado si está mudo |
| defaultplaybackRate | Establezca o devuelva la velocidad de reproducción predeterminada de audio/video |
| duración | Volver a la longitud del audio/video actual (en segundos) |
| terminado | Si la reproducción del audio/video ha terminado |
| error | Regrese al objeto MediaError del estado de error de audio/video |
| Grupo media | Establezca o devuelva la combinación de audio/video (para conectar múltiples elementos de audio/video) |
| apagado | Establezca o devuelva el audio/video si está en silencio |
| estate de red | Vuelva al estado de red actual del audio/video |
| detenido | Establezca o devuelva el audio/video si se detiene |
| Reproducción | Velocidad de reproducción de audio/video establecida o devuelto |
| jugó | Regrese para indicar el objeto Timeranges de la parte de reproducción de audio/video |
| Estate | Volver al estado de audio/video actualmente listo |
| solicitable | Volver al objeto Timeranges de la parte direccionable de audio/video |
| buscando | Si el usuario de atrás está buscando en el audio/video |
| iniciar | Regrese para indicar el objeto de fecha del desplazamiento de tiempo actual |
| huellas textuales | Volver para indicar que el objeto TextTrackList que puede ser utilizado por el texto puede |
| Videotracks | Regrese a los objetos de VideotRackList que se pueden usar con pistas de video |
| volumen | Establecer o devolver el volumen de audio/video |
1.4.1 Método de video
| API | Descripción del evento |
|---|---|
| jugar | video.play (); |
| pausa | Video.Pause (); |
| carga | video.load (); |
| CanPlayType | Var Support = Videoid.CanPlayType ('Video/Mp4 ′); Determine si el navegador admite el tipo de formato de video actual Valor de retorno: Cadena vacía: no admite tal vez: puede soportar probablemente: soporte totalmente |
Método común
1.4.2 Estado de la red
Obtener objeto de video
Medios = document.getElementById (medios);
1.Media.CurrentsRC;
Volver a la URL del recurso actual
2.media.src = valor;
Devolver o establecer la URL del recurso actual
3.Media.CanPlayType (tipo);
¿Puedes jugar un cierto recurso de formato?
4.media.networkState;
0. Este elemento no se inicializa
1. Normal pero no usando la red
2. Descargar datos
3. Sin recurso
5.media.load ();
Vuelva a cargar el recurso especificado por SRC
6.media.buffered;
Regresar al área del búfer, Timeranges
7.media.preload;
Ninguno: no pre -carga
Metadatos: información previa a los recursos
Auto:
1.4.3 Estado de preparación
1.media.readystate
2. Media.
Si estás buscando
1.4.4 Estado de juego
1.Media.CurrentTime = Value;
La posición de juego actual se puede cambiar a la posición
2.Media.Starttime;
Generalmente 0, si es un medio de transmisión o el recurso que no comienza desde 0, no es 0
3.Media. Duración;
La longitud de recurso actual fluye hacia atrás ilimitado
4.Media.
Si hacer una pausa
5.Media.DefaultPlayBackRate = valor;
La velocidad de reproducción predeterminada, puedes configurar
6.media.playbackRate = valor;
La velocidad de reproducción actual se cambia inmediatamente después de configurar
7.media.played;
Regrese al área que se ha jugado, Timeranges, vea el objeto a continuación sobre este objeto
8. Media. Seekable;
Regresar al área que puede buscar
9.media.nded;
Si terminar
10.media.autoPlay;
Si jugar automáticamente
11.media.loop;
Si circular
12.media.play ();
Jugar
13.media.Pause ();
pausa
1.4.5 Control de video
1.4.6 Eventos relacionados
1. En primer lugar, puede unir el evento a través del método AddEventListener en JS
| evento | ilustrar |
|---|---|
| cargar | El cliente inicia datos de solicitud |
| Progreso | El cliente solicita datos |
| Suspender | Descarga de retraso |
| abortar | El cliente termina activamente de descarga (no causada por errores) |
| cargar | El cliente inicia datos de solicitud |
| Progreso | El cliente solicita datos |
| error | Errores encontrados al solicitar datos |
| Parado | Velocidad de red ST para |
| jugar | Play () y activador automático |
| pausa | pausa () disparador |
| metadata cargada | Obtener con éxito la longitud de los recursos |
| Data cargada | - |
| espera | Esperar datos no está mal |
| jugar | Iniciar reproducción |
| Puede jugar | Se puede jugar, pero se puede suspender debido a la carga |
| Canplaythrough | Puedes tocar, las canciones están cargadas |
| buscando | Encontrar |
| Buscado | Descubrir |
| tiempo superpeto | Cambios en el tiempo de juego |
| terminado | Jugar final |
| Rata | Cambio de tasa de juego |
| cambio de duración | Cambios de longitud de recursos |
| Volumegar | Cambio de volumen |
2. Eventos comunes
1.4.7 otros
1. Pantalla completa:
2. Salga de la pantalla completa:
1. Formato de audio común
Codificación de audio: ACC, MP3, Vorbis
2. HTML5 admite el formato de audio:
| propiedad | Valor de atributo | Anotación |
|---|---|---|
| SRC | Url | La dirección de la URL de la música se reproduce (Firefox solo admite la música OGG, y IE9 solo admite la música de formato mp3 .Chrome parece ser totalmente compatible) |
| precargar | precargar | Pre -carga (cargar o buffer audio Cuando la página está cargada). |
| bucle | bucle | Reproducción circular |
| Control | Control | Si se debe mostrar la barra de control predeterminada (botón de control) |
| autoplaz | autoplaz | Reproducción automática |
Soporte para el formato musical
| Formato de audio | Cromo | Firefox | IE9 | Ópera | Safari |
|---|---|---|---|---|---|
| Ogg | apoyo | apoyo | apoyo | No apoyo | No apoyo |
| Mp3 | apoyo | No apoyo | apoyo | No apoyo | apoyo |
| Wav | No apoyo | apoyo | No apoyo | apoyo | No apoyo |
El audio puede ser creado por nuevo. También puede obtenerlo usando documens
// 通过 Nuevo 关键字来创建 Audio 对象 Var Music = New Audio (test.mp3); // 通过 Documento 来获取已经存在的 Audio 对象 var music = document.getElementById (audio); // 当然这里也可以使用 documento Obtenga otros métodos como .getElementsByClassName ('ClassName'). 2.3 Algunos atributos y métodos de etiquetas de audio proporcionadas por API| propiedad | Anotación |
|---|---|
| duración | Obtenga la longitud total de los archivos multimedia, con S como la unidad, si no se puede obtener, regrese a NAN |
| detenido | Si los archivos multimedia están suspendidos, el atributo en pausa devuelve verdadero, de lo contrario, devolverá falso |
| terminado | Si se reproduce el archivo de medios, devuelve verdadero |
| apagado | Utilizado para obtener o establecer un estado mute. Valor booleano |
| volumen | El valor de atributo del volumen de control de volumen es 0-1; |
| Hora de inicio | Volver a la hora de inicio |
| error | Devolver el código de error es normal cuando Uull. De lo contrario, puede obtenerlo a través de Music.error.code |
| actual | Se utiliza para obtener o controlar el tiempo de reproducción actual, la unidad es S. |
| Corriente | Devuelve el archivo que se reproduce o se carga en forma de una cadena |
| función | efecto |
|---|---|
| carga () | Cargar audio, software de video |
| Jugar () | Cargar y reproducir audio, archivos de video o reiniciar el audio y el video pausados |
| pausa () | Audio de audio y archivos de video que se detienen para el estado de reproducción |
| CanPlayType (OBJ) | Pruebe si admite un archivo de mini tipo determinado |
En primer lugar, puede unir el evento a través del método AddEventRistener en JS
| Nombre del evento | Evento |
|---|---|
| cargar | El cliente inicia datos de solicitud |
| Progreso | El cliente solicita datos (o amortiguación) |
| jugar | Play () y Autoplay cuando juega |
| pausa | Cuando se promueve el método pausa () |
| terminado | La reproducción actual ha terminado |
| tiempo superpeto | El tiempo de reproducción actual cambia. El procesamiento de tiempo de uso común durante la reproducción |
| Canplaythrough | La canción ha sido cargada y completamente completa |
| Puede jugar | El cojín se puede jugar hasta ahora. |
De hecho, la API y el audio de Video son casi consistentes. Un poco diferente. Entonces, básicamente, uno de los otros estará allí
ResumirLo anterior es todo el contenido de este artículo.