HTML標簽之音頻、視頻標簽

2024-04-27 15:11:45

字體：大中小

來源：轉載

供稿：網友

<audio>標簽

<audio>標簽：定義聲音，如音樂或音頻流等。<audio>元素支持常用的三種格式，分別是：MP3、Wav、Ogg。常用屬性：autoplay：音頻就緒后馬上自動播放。若沒有該屬性，音頻就緒后需手動播放音頻。 controls：音頻控件，若出現該屬性，則向用戶顯示控件（靜音/'播放/暫停音量）。若沒有該屬性，則控件是不顯示的。 source：媒體元素，定義媒體資源。允許規定兩個音頻文件供瀏覽器根據瀏覽器本身對音頻文件類型或編解碼器的支持進行選擇。 "src"表示音頻文件的URL，"type"表示媒體資源的MIME類型，常用類型：音頻有audio/ogg、audio/mpeg、視頻有video/mp4、video/ogg、video/webm。代碼如下：

<!DOCTYPE html><html lang="zh">  <head>    <meta charset="utf-8">    <title>audio音頻標簽</title>  </head>  <body>        <audio controls autoplay>    <source src="deng.ogg" type="audio/ogg"> <!-- source定義媒體資源 -->    <source src="deng.mp3" type="audio/mpeg">    當該元素不被瀏覽器支持時，該段文本被顯示。    </audio>  </body></html>在瀏覽器顯示的效果如下：由于不同瀏覽器的內核不一樣，解析出來的效果存在差異，同時也突出了不同的瀏覽器的特點。在谷歌中的效果如下：在火狐中的效果如下：在Opera中的效果如下：以上是有autoplay屬性的。下面是沒有autoplay屬性的：<!DOCTYPE html><html lang="zh">  <head>    <meta charset="utf-8">	<title>audio標簽</title>  </head>  <body>    	<audio controls>		<source src="deng.ogg" type="audio/ogg"></source>  <!-- source定義媒體資源-->	<source src="deng.mp3" type="audio/mpeg"></source>		如果該元素不被瀏覽器支持，則本段文本被顯示。		</audio>	  </body></html>效果如下：loop：該屬性表示音頻循環播放。若沒有該屬性，音頻播放結束后就暫停，若有該屬性，音頻播放結束后循環開始播放該音頻。無loop屬性的的情況下：播放結束后就暫停在有loop屬性下，音頻播放結束后循環播放。muted：該屬性規定音頻輸出為靜音，當音頻加載完成后，音頻為靜音狀態。以上均為無mute屬性的情況，如下為有muted屬性的狀態：<audio muted controls>		<source src="deng.ogg" type="audio/ogg"></source>  <!-- source定義媒體資源-->	<source src="deng.mp3" type="audio/mpeg"></source>		如果該元素不被瀏覽器支持，則本段文本被顯示。		</audio>效果：PReload：當頁面加載時，規定音頻是否加載以及如何加載。preload="none||auto||metadata"分別對應不加載、自動加載以及元數據。例：當preload="none"時，為不加載。<audio controls preload="none">		<source src="deng.ogg" type="audio/ogg"></source>  <!-- source定義媒體資源-->	<source src="deng.mp3" type="audio/mpeg"></source>		如果該元素不被瀏覽器支持，則本段文本被顯示。		</audio>效果：<video>標簽
<video>標簽定義視頻。如電影片段或視頻流。常用的格式：MP4、Ogg、Webm。與"audio"類似的屬性有：autoplay、loop、muted、preload。特有的屬性有：widht、height為視頻定義寬、高。poster表示在用戶點擊播放按鈕前播放器中顯示的圖片。
無poster屬性的情況下：<!DOCTYPE html><html lang="zh">  <head>    <meta charset="utf-8">	<title>audio標簽</title>  </head>  <body>    	<video controls preload="auto" height="200" width="300">		<source src="movie.ogg" type="video/ogg"></source>  <!-- source定義媒體資源-->	<source src="movie.mp4" type="video/mp4"></source>		如果該元素不被瀏覽器支持，則本段文本被顯示。		</video>	  </body></html>效果如下：有poster屬性的情況下：<video controls preload="auto" height="200" width="300" poster="pho.jpg">		<source src="movie.ogg" type="video/ogg"></source>  <!-- source定義媒體資源-->	<source src="movie.mp4" type="video/mp4"></source>		如果該元素不被瀏覽器支持，則本段文本被顯示。		</video>效果如下：注：<video>標簽的控件按鈕很簡單，如果想要有更加復雜的控件按鈕，則需結合javascript來實現。<audio>、<video>是HTML5新提出的標簽，有效地代替了部分Flash。