HTML5 透過HTML標籤「audio」和「video」來支援嵌入式的媒體，使開發者能夠輕鬆地將媒體嵌入HTML文件中。
嵌入媒體EDIT
在HTML中嵌入媒體：
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> 你的浏览器不支持 <code>video</code> 标签.</video>
這個例子展示了一個帶有回放控制器的可播放視頻，視頻源自Theora網站。
下面是一個將音訊嵌入到HTML文件的範例。
<audio src="/test/audio.ogg"><p>你的浏览器不支持audio标签</p></audio>
src屬性可以設定為音訊檔案的URL或本機檔案的路徑。
<audio src="audio.ogg" controls autoplay loop><p>你的浏览器不支持audio标签</p></audio>
這個範例的程式碼中使用了HTML的「audio」元素的一些屬性：
controls : 為網頁中的音訊顯示標準的HTML5控制器。
autoplay : 讓音訊自動播放。
loop : 讓音訊自動重複播放。
<audio src="audio.mp3" preload="auto" controls></audio>
preload屬性用來緩衝audio元素的大文件，有三個屬性值可供設定：
"none" 不緩衝檔案
"auto"緩衝音訊檔案
"metadata" 僅緩衝檔案的元資料
可以用
<video controls> <source src="foo.ogg" type="video/ogg"> <source src="foo.mp4" type="video/mp4"> Your browser does not support the <code>video</code> element.</video>
當瀏覽器支援Ogg格式的時候， 程式碼會播放Ogg檔案。 如果瀏覽器不支援Ogg，瀏覽器會播放MPEG-4 file。請參閱清單 audio和video元素支援的媒體格式 來查看不同瀏覽器對視訊音訊編碼格式的支援。
你也可以指定視訊檔案所需的視訊編解碼器的值；這樣允許瀏覽器做出更正確的決定：
<video controls> <source src="foo.ogg" type="video/ogg; codecs= dir ac, speex"> Your browser does not support the <code>video</code> element.</video>
在這裡，我們指定video標籤使用Dirac和Speex的視訊編解碼器。如果瀏覽器支援Ogg，但不支援指定的編解碼器，則影片不會被載入。
如果類型屬性沒有被指定，媒體類型將返回到伺服器然後檢查瀏覽器是否可以解決；如果不能執行，就檢查下一個來源。如果沒有任何一個指定的來源元素可以使用，則分派一個錯誤事件標籤給video。如果指定了類型屬性，那麼將會與瀏覽器能夠播放的類型做對比，如果其沒有被識別，甚至不會被向伺服器發出詢問；相反，下一個來源會被同時檢查。
點選 媒體事件 來查看完整的媒體回放事件清單。要查看不同瀏覽器支援的媒體格式的詳細信息， 點擊 Media formats supported by the audio and video elements.
媒體回放控制EDIT
#當你已經用新的元素將媒體嵌入HTML 文件以後，你就可以用JavaScript 程式碼採用程式設計的方式來控制它們。比方說，如果你想（重新）開始播放，可以寫如下的程式碼：
var v = document.getElementsByTagName("video")[0];v.play();頭一行是取得目前文件中第一個影片元素，下一行呼叫了該元素的 play() 方法，此方法在實作媒體元素的介面中定義。
控制一個HTML5 音訊播放器的播放、暫停、增減音量等則直接了當：
<audio id="demo" src="audio.mp3"></audio><p> <button onclick ="document.getElementById('demo').play()">播放声音</button> <button onclick="document.getElementById('demo').pause()">暂停声音</button> <button onclick="document.getElementById('demo').volume+=0.1">提高音量</button> <button onclick="document.getElementById('demo').volume-=0.1">降低音量</button></p>
終止媒體下載EDIT
#停止媒體播放很簡單，只要呼叫pause() 方法即可，然而瀏覽器還會繼續下載媒體直到媒體元素被垃圾回收機制回收。
以下是即時停止媒體下載的方法：
var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src='';
//or
mediaElement.removeAttribute("src");透過移除媒體元素的 src 屬性（或直接將其設為一個空字串——這取決於具體瀏覽器）， 你可以摧毀該元素的內部解碼，從而結束媒體下載。 removeAttribute() 操作並不乾淨， 而將
在媒體中尋找EDIT
媒體元素支援在媒體的內容中從目前播放位置移到某個特定點。 這是透過設定元素的屬性currentTime的值來達成的；有關元素屬性的詳細資訊請看HTMLMediaElement 。 簡單的設定那個你希望繼續播放的以秒為單位時間值。
你可以使用元素的属性seekable来决定媒体目前能查找的范围。它返回一个你可以查找的TimeRanges 时间对象。
var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start();
// 返回开始时间
(in seconds)mediaElement.seekable.end();
// 返回结束时间 (in seconds)mediaElement.currentTime = 122;
// 设定在 122 secondsmediaElement.played.end();
// 返回浏览器播放的秒数标记播放范围EDIT
在给一个
一条指定时间范围的语句：
#t=[starttime][,endtime]
时间值可以被指定为秒数（如浮点数）或者为以冒号分隔时/分/秒格式（像2小时5分钟1秒表示为2:05:01）。
【相关推荐】
4. 简述
5. 分析H5网页中video标签中的MP4视频无法播放的缘由
以上是教你如何使用好HTML5的音頻和視頻的詳細內容。更多資訊請關注PHP中文網其他相關文章！
