Antes do lançamento do HTML5, o áudio e o vídeo online eram realizados com a ajuda do Flash ou de ferramentas de terceiros. Agora o HTML5 também oferece suporte a essa função. Em um navegador compatível com HTML5, áudio e vídeo podem ser reproduzidos sem a instalação de plug-ins. O suporte nativo para áudio e vídeo injeta um enorme potencial de desenvolvimento no HTML5.
Incorporação de áudio em HTML (método tradicional): Embora este método possa ser implementado, ele requer que o navegador suporte Flash e não pode ser controlado, por isso é muito difícil de implementar.
<object height=200 width=200 data=2_1.swf </object><embed src=2_1.mp4 type=>
Isso significa que há um grande problema com o HTML5, que é a compatibilidade. Áudio
Formatos de áudio suportados por HTML5: vídeoFormato de vídeo:
Pode-se ver acima que o HTML5 parece suportar alguns formatos, então quando você descobrir que áudio e vídeo não são exibidos ao usar HTML5, deve ser um problema que o formato não seja suportado. Nota: MP4 tem 3 codificações, mpg4(xdiv),,mpg4(xvid), avc(h264). Somente h264 é a codificação padrão MP4 reconhecida (também estou enganado aqui, outros formatos só têm som, mas não têm imagens). Se você encontrar esse tipo de problema, basta usar um conversor de formato de vídeo para converter o formato e tudo ficará bem.
O áudio é muito simples de implementar: a barra de ferramentas aqui usa a barra de ferramentas padrão do navegador.
<audio src=htmls/1.mp3 controles=controls loop=loop preload=auto >Seu navegador não suporta o elemento de vídeo</audio>
Embora o padrão do navegador possa ser usado para vídeos, a personalização privada não é possível, portanto, do ponto de vista técnico, você ainda precisa aprender como fazer suas próprias ferramentas para implementar funções (áudio também pode se referir a este método).
audioVideo.html
<!DOCTYPE html><html><head><meta charset=UTF-8><title>Colocar vídeo na página da 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=loop preload=auto >Seu navegador não suporta o elemento de vídeo</audio><video id=myPlayer width=600 height=400 src=htmls/2_1.mp4 controles=controls loop=loop poster=3.jpg>Seu navegador não suporta o elemento de áudio <!-- MP4 tem 3 codificações, mpg4(xdiv),,mpg4(xvid), avc(h264), Somente h264 é a codificação padrão MP4 reconhecida--></video><div id=progress></div><!-- Controle de volume--><input id=volume type=range min=0 max=1 step = 0,1 onchange=Volume(this)><!-- Informações de progresso de taxa e tempo--><span id=rate>1</span>fps <span id=info></span><button onclick=Play(this) id=btn1>Reproduzir</button><button onclick=Fast()>Avanço rápido</button><button onclick=Slow()>Avanço lento</button><button onclick=Prev() >Voltar</button><button onclick=Next()>Avançar</button><button onclick=Muted(this)>Silenciar</button></body></html>
Display (html) e implementação de função (js) são separados e importados de fora.
ControlBar.js
//Use o script para detectar suporte a tags do navegador var support = !!document.createElement(audio).canPlayType;if (!support) {alert(seu navegador não suporta a reprodução deste vídeo);}//Defina o objeto de vídeo global var e1 = null;window.addEventListener(load, function() {e1 = document.getElementById(myPlayer);});/*Avançar: um minuto*/function Next() {e1.currentTime+=10; //Definir a propriedade currentTime, avançar 10s}/*Retroceder: um minuto*/function Prev() {e1.currentTime-=10; *Reproduzir/Pausar*/função Reproduzir(e) {if(e1.paused){e1.play();document.getElementById(btn1).innerHTML=pause}else{e1.pause();document.getElementById(btn1).innerHTML=play}}/*Avanço lento: Quando é menor ou igual a 1, diminui apenas 0,2 cada vez; quando é maior que 1, diminui 1 cada vez */função; Lento(){if(e1.playbackRate<=1){e1.playbackRate-=0.2;}else{e1.playbackRate-=1;}document.getElementById(rate).innerHTML=fps2fps(e1.playbackRate);}/ *Avanço lento: Quando é menor ou igual a 1, desacelera apenas 0,2 a cada vez; quando é maior que 1, diminui 1 a cada vez */função; Fast(){if(e1.playbackRate<1){e1.playbackRate+=0.2;}else{e1.playbackRate+=1;}document.getElementById(rate).innerHTML=fps2fps(e1.playbackRate);}função fps2fps(fps ){se(fps<1){retornar fps.toFixed(1);}else{return fps;}}/*Mute*/função 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 volume*/função Volume(e){if(e1.muted==true){e1.muted=false;}e1.volume=e.value;}/* Informações de progresso: controla a barra de progresso e exibe o tempo de progresso*/função Progress( ) {var p1 = document.getElementById (progresso);p1.style.width = (e1.currentTime/e1.duration) * 720 + px; .duração);}função s2time(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);}/* Depois que a página da web for carregada, adicione a função de processamento de progresso ao evento timeupdate do objeto de vídeo*/window.addEventListener(load,function(){e1.addEventListener(timeupdate,Progress);});/*Adicione progresso ao Função de processamento de evento window.onload */window.addEventListener(load,Progress);Funções implementadas: reproduzir, pausar, avançar rápido, avançar lentamente, avançar, retroceder, controle de volume, barra de progresso e exibição de tempo. Pode-se observar que funções mais complexas podem ser alcançadas através das propriedades e métodos de Áudio ou Vídeo.
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.