HTML5未出櫃之前，線上的音訊和視訊都是藉助Flash或第三方工具實現的，現在HTML5也支援了這方面的功能。在一個支援HTML5的瀏覽器中，不需要安裝任何外掛程式就能播放音訊和視訊。原生的支援音訊和視頻，為HTML5注入了巨大的發展潛力。
html實作音訊嵌入(傳統方式)：這種方式雖然可以實現，但是要瀏覽器支援Flash而且並不能實現控制，所以要實現起來很麻煩。
<object height=200 width=200 data=2_1.swf ></object><embed src=2_1.mp4 type=>
那麼也就是說HTML5存在一個很大的問題就是相容性。音訊
HTML5支援的音訊格式：影片影片格式：
由上可知，HTML5似乎支援的格式有點少哈，所以當你發現用HTML5放置音訊和視訊不顯示時，應該就是格式不支援的問題。註：MP4有3種編碼，mpg4(xdiv),,mpg4(xvid)，avc(h264)， 只有h264才是公認的MP4標準編碼(在這也是被坑了，其他格式的只有聲音沒有圖像。)遇到這種問題，就用影片格式轉換器，轉換一下格式就OK囉。
音訊實作起來很簡單：這裡工具條使用了瀏覽器預設的工具條。
<audio src=htmls/1.mp3 controls=controls loop=loop preload=auto >你的瀏覽器不支援video元素</audio>
雖然影片也可以使用瀏覽器預設的，但無法實現私人訂製，所以從學技術的角度講，還是要學習一下自己做工具實作功能（audio也可參考此方法）。
audioVideo.html
<!DOCTYPE html><html><head><meta charset=UTF-8><title>網頁放置影片</title><style type=text/css></style><script type=text/javascript src= js/ControlBar.js></script></head><body><audio src=htmls/1.mp3 controls=controls loop=loop preload=auto >你的瀏覽器不支援video元素</audio><video id=myPlayer width=600 height=400 src=htmls/2_1.mp4 controls=controls loop=loop poster=3.jpg>你的瀏覽器不支援audio元素<!-- MP4有3種編碼，mpg4(xdiv),,mpg4(xvid)，avc(h264)，只有h264才是公認的MP4標準編碼--></video><div id=progress></div><!-- 音量控制--><input id=volume type=range min=0 max=1 step =0.1 onchange=Volume(this)><!-- 速率與時間進度的資訊--><span id=rate>1</span>fps <span id=info></span><button onclick=Play(this) id=btn1>播放</button><button onclick=Fast()>快轉</button><button onclick=Slow()>慢轉</button><button onclick=Prev() >後退</button><button onclick=Next()>前進</button><button onclick=Muted(this)>靜音</button></body></html>
顯示(html)與功能實作(js)分離，由外部導入
ControlBar.js
//使用腳本偵測瀏覽器的標籤支援情況var support = !!document.createElement(audio).canPlayType;if (!support) {alert(你的瀏覽器不支援本影片播放);}// 定義全域的視訊物件var e1 = null;window.addEventListener(load, function() {e1 = document.getElementById(myPlayer);});/*前進：一分鐘*/function Next() {e1.currentTime+=10; //設定屬性currentTime,快轉10s}/*後退：一分鐘*/function Prev( ) {e1.currentTime-=10; //設定屬性currentTime,後退10s}/*播放/暫停*/function Play(e) {if(e1.paused){e1.play();document.getElementById(btn1).innerHTML=暫停}else{e1.pause();document.getElementById(btn1).innerHTML=暫停}}/*慢進播放：小於等於1時，每次都只減慢0.2的速率；大於1時，每次減少1 */function Slow(){if(e1.playbackRate<=1){e1.playbackRate-=0.2;}else{e1.playbackRate-=1;}document.getElementById(rate).innerHTML=fps2fps(e1.playbackRate);}/ *慢進：小於等於1時，每次都只減慢0.2的速率；大於1時，每次減1 */function Fast(){if(e1.playbackRate<1){e1.playbackRate+=0.2;}else{e1.playbackRate+=1;}document.getElementById(rate).innerHTML=fps2fps(e1.playbackRate);}function fps2fpsfpsfps ){if(fps<1){return fps.toFixed(1);}else{return fps;}}/*靜音*/function Muted(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;}}/*調整音量*/function Volume(e){if(e1.muted==true){e1.muted=false;}e1.volume=e.value;}/* 進度資訊：控制進度條，並顯示進度時間*/function Progress() {var p1=document.getElementById(progress);p1.style.width=(e1.currentTime/e1.duration)*720+px;document.getElementById(info).innerHTML=s2time(e1.currentTime)+/+s2time(e1 .duration);}function 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);}/*網頁載入完畢後，把進度處理函數加入到影片物件的timeupdate事件*/window.addEventListener(load,function(){e1.addEventListener(timeupdate,Progress);});/*為window.onload事件加入進度處理函數*/window.addEventListener(load,Progress);實現的功能：播放，暫停，快進，慢進，前進，後退，音量控制，進度條和時間顯示。由此可見透過Audio或Video的屬性和方法可以實現更複雜的功能。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。