HTML5 DOM 為 <audio> 和 <video> 元素提供了方法、屬性和事件。 這些方法、屬性和事件允許您使用 JavaScript 來操作 <audio> 和 <video> 元素。 ·首先帶大家熟悉一下video標簽的屬性方法,根據屬性方法做一個小demo, HTML5支持的視頻格式: ...
HTML5 DOM 為 <audio> 和 <video> 元素提供了方法、屬性和事件。
這些方法、屬性和事件允許您使用 JavaScript 來操作 <audio> 和 <video> 元素。
·首先帶大家熟悉一下video標簽的屬性方法,根據屬性方法做一個小demo,
-
HTML5
支持的視頻格式:Ogg
- 帶有
Theora
視頻編碼+Vorbis
音頻編碼的Ogg
文件 - 支持的瀏覽器:
F
、C
、O
- 帶有
MEPG4
- 帶有
H.264
視頻編碼+AAC
音頻編碼的MPEG4
文件 - 支持的瀏覽器:
S
、C
- 帶有
WebM
- 帶有
VP8
視頻編碼+Vorbis
音頻編碼的WebM
格式 - 支持的瀏覽器:
I
、F
、C
、O
- 劣勢:視頻少、轉碼器幾乎沒有,不好轉碼
- 帶有
-
想要
video
能自動填充慢父div的大小,只要給video
標簽加上style="width= 100%; height=100%; object-fit: fill"
即可 - 指定一種視頻格式,不能播就提示
- <video id="media" src="examp.mp4" width="500" poster="examp1.jpg" >您的瀏覽器不支持video</video>
給定多種視頻格式,瀏覽器根據自身支持程度選擇播放哪一種
註意:多個source
標簽,瀏覽器會從第一個開始識別,如果第一個不被識別,則會繼續識別第二個;如果第一個識別成功,則會直接播放第一種格式視頻
<video controls = “controls”>
<source src=”1.mp4” type=”video/mp4” /> //src屬性寫到source標簽中,要指定視頻的type類型,例如MP4的即為type=“video/mp4”
<source src = “2.ogg” type=”video/ogg” /> //ogg格式
<source src=”3.webm” type=”video/webm” /> //webm格式
</video>
controls 是否顯示播放控制項
autoplay 是否打開瀏覽器後自動播放
width 設置播放器的寬度
height 設置播放器的高度
loop 設置視頻是否迴圈播放
preload 設置是否等載入完再播放
src url 設置要播放視頻的url地址
poster imgurl 設置播放器初始預設顯示圖片
canPlayType() 檢測瀏覽器是否能播放指定的音頻/視頻類型。
play() 開始播放音頻/視頻。
pause() 暫停當前播放的音頻/視頻。
playbackRate 設置或返迴音頻/視頻播放的速度。
currentTime 設置或返迴音頻/視頻中的當前播放位置(以秒計)。
duration 返回當前音頻/視頻的長度(以秒計)。
loadedmetadata:當指定的音頻/視頻的元數據已載入時,會發生 loadedmetadata事件。
timeupdate: 時間改變時觸發
muted 設置或返迴音頻/視頻是否靜音。
volume 設置或返迴音頻/視頻的音量
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 視頻地址:<input type="text" id="videoUrl" value="http://115.231.144.52/12/v/w/m/y/vwmypxnxothnduooudlozlddkekrrs/hc.yinyuetai.com/E771014D8879E8AA0ED2CBC807F1C2CE.flv?sc=f1cc344f8e1ff11a"/> <button onclick="getVideo()">load</button><br /> <video id="video" width="500" height="400" controls autoplay loop preload poster="img/1.jpg"></video><br /> <button onclick="play()">播放/暫停</button> <button id="mute">靜音</button> <button id="volUp">++</button> <button id="volDown">--</button> <button id="slower">減慢速率</button> <button id="normal">恢復速率</button> <button id="faster">加快速率</button> <br /> <button id="reset" >複位</button> <button id="bwd" > <<倒退 </button> <button id="fwd" >快進>></button> <br /> 視頻長度: <span id="vLength"></span> <br /> 當前時間: <span id="curTime" ></span><br /> 持續時間: <span id="vRemaining" ></span> </body> <script type="text/javascript"> /*載入視頻*/ var video=document.getElementById("video"); function getVideo(){ var videoUrl=document.getElementById("videoUrl").value; if(videoUrl!=""){ video.src=videoUrl; video.load(); } } /*播放*/ if(video.canPlayType){ function play(){ if(video.paused){ video.play(); }else{ video.pause(); } } } /*靜音*/ document.getElementById("mute").addEventListener("click",function(){ if(video.muted){ video.muted=false; }else{ video.muted=true; } }); /*音量*/ function setVol(value){ var vol=video.volume; vol+=value; if(vol>=0&&vol<=1){ video.volume=vol; }else{ video.volume=(vol<0)?0:1; } } document.getElementById("volUp").addEventListener("click",function(){ setVol(.1); }); document.getElementById("volDown").addEventListener("click",function(){ setVol(-.1); }); /*減小速率加大速率*/ document.getElementById("slower").addEventListener("click",function(){ video.playbackRate-=.25; }); document.getElementById("faster").addEventListener("click",function(){ video.playbackRate+=.25; }); document.getElementById("normal").addEventListener("click",function(){ video.playbackRate=1; }); /*快進倒退複位*/ function setTime(a){ if(a==0){ video.currentTime=a; }else{ video.currentTime+=a; } } document.getElementById("reset").addEventListener("click",function(){ setTime(0); }); document.getElementById("fwd").addEventListener("click",function(){ setTime(10); }); document.getElementById("bwd").addEventListener("click",function(){ setTime(-10); }); /*視頻長度*/ video.addEventListener("loadedmetadata", function () { vLength = video.duration.toFixed(1); document.getElementById("vLength").textContent = vLength; }); /*當前時間和持續時間*/ video.addEventListener("timeupdate", function () { var currentTime= video.currentTime; document.getElementById("curTime").textContent = currentTime.toFixed(1); document.getElementById("vRemaining").textContent = (vLength - currentTime).toFixed(1); }); </script> </html>