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>
