h5中的video與audio
·首先帶大家熟悉一下video標簽的屬性方法，根據屬性方法做一個小demo，
-
HTML5支持的視頻格式：Ogg- 帶有
Theora視頻編碼+Ogg文件 - 支持的瀏覽器:
F、O
- 帶有
MEPG4- 帶有
H.264視頻編碼+MPEG4文件 - 支持的瀏覽器:
S、WebM- 帶有
VP8視頻編碼+WebM格式 - 支持的瀏覽器:
I、C、想要video能自動填充慢父div的大小，只要給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>
h5中的video與audio