Antes de que apareciera HTML5, el audio y el vídeo en línea se realizaban con la ayuda de Flash o herramientas de terceros. Ahora HTML5 también admite esta función. En un navegador compatible con HTML5, se puede reproducir audio y vídeo sin instalar ningún complemento. El soporte nativo para audio y vídeo inyecta un enorme potencial de desarrollo en HTML5.
Incrustación de audio en HTML (método tradicional): aunque este método se puede implementar, requiere que el navegador admita Flash y no se puede controlar, por lo que es muy problemático de implementar.
<altura del objeto=200 ancho=200 datos=2_1.swf ></objeto><embed src=2_1.mp4 tipo=>
Eso significa que hay un gran problema con HTML5, que es la compatibilidad. Audio
Formatos de audio soportados por HTML5: videoFormato de vídeo:
De lo anterior se puede ver que HTML5 parece admitir algunos formatos, por lo que cuando descubre que el audio y el video no se muestran cuando usa HTML5, debería ser un problema que el formato no sea compatible. Nota: MP4 tiene 3 codificaciones, mpg4(xdiv), mpg4(xvid), avc(h264). Solo h264 es la codificación estándar MP4 reconocida (también me engañan aquí, otros formatos solo tienen sonido pero no imágenes). Si encuentra este tipo de problema, simplemente use un conversor de formato de video para convertir el formato y estará bien.
El audio es muy sencillo de implementar: la barra de herramientas aquí utiliza la barra de herramientas predeterminada del navegador.
<audio src=htmls/1.mp3 controles=controls loop=loop preload=auto >Su navegador no soporta el elemento video</audio>
Aunque el navegador predeterminado se puede usar para videos, la personalización privada no es posible, por lo que desde una perspectiva técnica, aún necesita aprender a crear sus propias herramientas para implementar funciones (el audio también puede referirse a este método).
audioVideo.html
<!DOCTYPE html><html><head><meta charset=UTF-8><title>Colocar vídeo en la página web</title><style type=text/css></style><script type=text/javascript src= js/ControlBar.js></script></head><body><audio src=htmls/1.mp3 controles=controles loop=precarga de bucle=auto >Su navegador no soporta el elemento vídeo</audio><video id=myPlayer width=600 height=400 src=htmls/2_1.mp4 controles=controls loop=loop poster=3.jpg>Su navegador no soporta el elemento audio <!-- MP4 tiene 3 codificaciones, mpg4(xdiv),,mpg4(xvid), avc(h264), Sólo h264 es la codificación estándar MP4 reconocida--></video><div id=progress></div><!-- Control de volumen--><input id=volume type=range min=0 max=1 paso = 0.1 onchange=Volumen(this)><!-- Información de progreso de velocidad y tiempo--><span id=rate>1</span>fps <span id=info></span><button onclick=Reproducir(this) id=btn1>Reproducir</button><button onclick=Fast()>Avance rápido</button><button onclick=Slow()>Avance lento</button><button onclick=Prev() >Atrás</button><button onclick=Next()>Adelante</button><button onclick=Silenciado(this)>Silenciar</button></body></html>
La visualización (html) y la implementación de funciones (js) están separadas e importadas desde el exterior.
ControlBar.js
//Usar script para detectar compatibilidad con etiquetas del navegador var support = !!document.createElement(audio).canPlayType;if (!support) {alert(su navegador no admite la reproducción de este video);}//Definir objeto de video global var e1 = null;window.addEventListener(load, function() {e1 = document.getElementById(myPlayer);});/*Adelante: un minuto*/function Next() {e1.currentTime+=10; //Establece la propiedad currentTime, avanza rápidamente 10 s}/*Rebobinar: un minuto*/function Prev() {e1.currentTime-=10; *Reproducir/Pausa*/función Reproducir(e) {if(e1.paused){e1.play();document.getElementById(btn1).innerHTML=pause}else{e1.pause();document.getElementById(btn1).innerHTML=play}}/*Avance lento: Cuando es menor o igual a 1, solo se ralentiza 0,2 cada vez; cuando es mayor que 1, disminuye 1 cada vez */función; Lento(){if(e1.playbackRate<=1){e1.playbackRate-=0.2;}else{e1.playbackRate-=1;}document.getElementById(rate).innerHTML=fps2fps(e1.playbackRate);}/ * Avance lento: cuando es menor o igual a 1, solo se ralentiza 0,2 cada vez, cuando es mayor que 1, disminuye 1 cada vez */función; Fast(){if(e1.playbackRate<1){e1.playbackRate+=0.2;}else{e1.playbackRate+=1;}document.getElementById(rate).innerHTML=fps2fps(e1.playbackRate);}función fps2fps(fps ){si(fps<1){regresar fps.toFixed(1);}else{return fps;}}/*Silenciar*/función Silenciado(e){if(e1.muted){e1.muted=false;e.innerHRML=X;document.getElementById(volume).value=e1.volume;}else{e1.muted=true;e.innerHRML= x;document.getElementById(volume).value=0;}}/*Ajustar volumen*/función Volumen(e){if(e1.muted==true){e1.muted=false;}e1.volume=e.value;}/* Información de progreso: controla la barra de progreso y muestra el tiempo de progreso*/función Progreso( ) {var p1=document.getElementById(progreso);p1.style.width=(e1.currentTime/e1.duration)*720+px;document.getElementById(info).innerHTML=s2time(e1.currentTime)+/+s2time(e1 .duración);}función s2tiempo(s){var m=parseFloat(s/60).toFixed(0);s=parseFloat(s%60).toFixed(0);return (m<10? 0+m:m)+:+(s<10?0+ s:s);}/* Después de cargar la página web, agregue la función de procesamiento de progreso al evento timeupdate del objeto de video*/window.addEventListener(load,function(){e1.addEventListener(timeupdate,Progress);});/*Agregue progreso al evento window.onload Función de procesamiento */window.addEventListener(load,Progress);Funciones implementadas: reproducción, pausa, avance rápido, avance lento, avance, retroceso, control de volumen, barra de progreso y visualización de la hora. Se puede ver que se pueden lograr funciones más complejas a través de las propiedades y métodos de Audio o Video.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.