video元素和audio元素
阿新 • • 發佈：2018-10-07
方法 n-n font 內容 reload 聲音 顯示 video tag fire
內容：
1.video元素
2.audio元素
註：這兩個元素均是HTML5新增的元素
1.video元素
(1)用途
<video> 標簽定義視頻，比如電影片段或其他視頻流
(2)標簽屬性
(3)實例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>video標簽</title> 7 </head> 8 <body> 9 10 <!-- 自動播放 有播放控件 寬600px 高400px --> 11 <video src="xxx.mp4" controls="controls" autoplay="autoplay" width="600" height="500"> 12 <!-- 當瀏覽器不支持video標簽時顯示如下文字 --> 13 your browser does not support the video tag14 </video> 15 16 </body> 17 </html>
(4)補充 - source元素與編碼格式
source元素指定多個播放格式與編碼：source元素可以為同一個媒體數據指定多個播放格式與編碼方式，以確保瀏覽器可以從中選擇一種自己支持的播放格式進行播放。選擇順序自上而下，直到選擇都所支持的格式為止。其使用方法如下：
1 <video> 2 <source src="video.m4v" type="video/mp4" /> 3 <source src="video.webm" type="video/webm"/> 4 <source src="video.ogv" type="video/ogg" /> 5 <source src="video.mp4" /> 6 </video>
各種設備對於編碼格式的支持：
- webm(.webm)格式的視頻：Firefox4.0以上、chrome6.0以上、Opera10.6以上；
- mp4(.m4v)格式的視頻：IE9.0以上、Safari3.1以上、iso5.0以上、Android4.0以上；
- ogg(.ogv)格式的視頻：Firefox3.5以上、chrome3.0以上、Opera10.5以上；
- mp4(.mp4)格式的視頻：IE9.0以上、Safari3.1以上、iso3.0以上、Android2.3以上；
2.audio元素
(1)用途
<audio> 標簽定義聲音，比如音樂或其他音頻流
(2)標簽屬性
preload屬性：這個屬性指定是否對數據進行預加載，如果是的話，瀏覽器會將視頻數據或者音頻數據進行緩沖，這樣做可以加快播放的速度。preload屬性的三個值：
- none表示不進行預加載；
- metadata表示只預加載媒體的元數據；
- auto(默認值)表示預加載全部的視頻或音頻；
(3)實例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>audio標簽</title> 7 </head> 8 <body> 9 10 <!-- 自動播放 帶播放控件 --> 11 <audio src="xxx.wav" controls="controls" autoplay="autoplay"> 12 <!-- 當瀏覽器不支持audio標簽時顯示如下文字 --> 13 your browser does not support the audio tag 14 </audio> 15 16 </body> 17 </html>
video元素和audio元素