Explicación detallada del control del nuevo atributo audio de audio y video (Recomendación)

Este artículo indica el control de H5 New Attribute Audio Audio and Video Video.

 <Udio Controls = Controls> <Source src = Pon la ruta del archivo de audio en él> </over> </audio>

 <video controls = controls loop = bucle autoplay = autoplay id = video> <fuente src = Pon la ruta del archivo de video en it> </over> </video> <botte> </boton> en> Abra el sonido < /Botón> <botón> reproducir </boton> <boton> deja de reproducir </botón> <botón> pantalla completa </botón>

El siguiente es el control de los archivos de video;

JavaScript Leads.

 <Script> var myVideo = document.getElementById (video); 1] .Click = function () {myVideo.MUTE = true; );

Sincrónico.

Como se muestra en la figura:

Déjame hablar de eso aquí, en primer lugar

(1), el valor máximo de la longitud total del video al video a la barra de progreso, el progreso.max = video.duration;

(2), necesita obtener la longitud de la posición actual de la reproducción de video actual a la longitud de la barra de progreso actual, el progreso.value = video.CurrentTime;

Luego, mientras la reproducción de video, es necesario asegurarse de que el valor de la barra de progreso pueda obtener la duración del video y la posición de tiempo de reproducción actual a tiempo.

Debe abrir un temporizador setInterval (pro, 100);: significa que el valor del video se asigna a la barra de progreso de progreso a 1 milisegundo, para garantizar la oportunidad.

De esta manera, la barra de progreso se puede sincronizar con precisión con el video.

1. En primer lugar, debe obtener el valor de valor del rango y el volumen dado al video para controlar el volumen del video.

 <Entrada tipo = rango min = 0 valor = 50 max = 100 id = rango /> var ran = document.getElementById (rango);

Get Range.Value,

Atributos de audio asignados a video: video.volume = range.value/100;

En este momento, el volumen de Range Range simplemente arrastrando y controlando el video.

Luego debe ir en el sonido para cerrar el juicio.

El código final es el siguiente;

 <! > Cerrar sonido </boton> <button onClick = discableMute () type = botón> Abrir el sonido </button> <button onClick = playVid () type = botón> reproducir video </botón> <botón onclick = paUvid () type = Button> Pasando video </boton> <button onClick = showfull () type = Button> pantalla completa </boton> <span> progreso: </span> <progreso value = 0 max = 0 id = pro> </progreso > <span> volumen: </span> <input type = range min = 0 max = 100 value = 50 onChange = setValue () id = ran/> </div> <script> var btn = document.getElementsByTagName (botón) ; ] .disable = true; } // reproduce la función de video playVid () {myVideo.play (); cantidad funch setValue () {) {) myVideo.volume = ran.value/100;

Lo anterior es todo el contenido de este artículo.