H5新標(biāo)簽audio&video
audio
<audio id="audio" controls autoplay loop muted >您的瀏覽器不支持audio標(biāo)簽</audio>
-
controls顯示播放器頁面(默認(rèn)隱藏)
-
autoplay自動播放
-
loop 設(shè)置或返回音頻/視頻是否再播放結(jié)束時再次播放
-
true再次播放
-
false不再次播放（默認(rèn)值）
-
muted靜音
-
currentSrc(只讀) 返回當(dāng)前音頻/視頻的URL
-
duration(只讀) 返回當(dāng)前音頻/視頻的長度（以秒計）
-
currentTime 設(shè)置或返回音頻/視頻的當(dāng)前播放位置（以秒計）
-
volume 設(shè)置或返回音頻/視頻的當(dāng)前音量忱反，范圍0~1
-
muted 設(shè)置或返回音頻/視頻是否靜音
-
playbackRate 設(shè)置或返回音頻/視頻的當(dāng)前播放速度
- 1.0（正常速度炕横，默認(rèn)值）
- 0.5 半速
- 2.0 倍速
-
ended(只讀) 返回音頻/視頻是否播放完畢
-
true播放結(jié)束
-
false播放未結(jié)束
-
paused(只讀) 設(shè)置或返回音頻/視頻是否暫停
-
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--controls 顯示播放器頁面-->
<!--autoplay 自動播放-->
<!--loop 無限循環(huán)-->
<!--muted 靜音-->
<audio id="audio" src="我們愛過嗎只是睡過吧.mp3" controls <!--autoplay--> loop <!--muted-->>
您的瀏覽器不支持audio標(biāo)簽
</audio>
<br />
<button id="play">播放</button>
<button id="pause">暫停</button>
<button id="seek">指定時間開始播放</button>
<button id="muted">靜音</button>
<button id="pp">播放/暫停</button>
</body>
<script type="text/javascript">
var audio=document.getElementById("audio");
var playBtn=document.getElementById("play");
var pauseBtn=document.getElementById("pause");
var seekBtn=document.getElementById("seek");
var mutedBtn=document.getElementById("muted");
var ppBtn=document.getElementById("pp");
playBtn.onclick=function(){
audio.play();
}
pauseBtn.onclick=function(){
audio.pause();
}
seekBtn.onclick=function(){
//調(diào)節(jié)當(dāng)前時間
//audio.fastseek(5); safari支持
//使用currentTime進行時間的調(diào)節(jié)痛阻，進行音樂進度的控制
audio.currentTime=60;
}
mutedBtn.onclick=function(){
//使用volume調(diào)節(jié)聲音大小边翼，可以用來做靜音按鈕
audio.volume=0;
}
var playStatus=false;
ppBtn.onclick=function(){
if(playStatus==false) {
audio.play();
}else{
audio.pause();
}
playStatus=!playStatus;
}
</script>
</html>
video
<video id="video" src="許嵩、黃齡 - 驚鴻一面.mkv" width="500" controls loop poster="img/bj.jpg">
您的瀏覽器不支持video標(biāo)簽
</video>
-
controls顯示播放器頁面(默認(rèn)隱藏)
-
autoplay自動播放
-
loop無限循環(huán)
-
muted靜音
-
poster規(guī)定視頻下載時顯示的圖像竖瘾，或者在用戶點擊播放按鈕前顯示的圖像
另一種方式沟突，匹配視頻
<video id="video" width="500" height="" controls loop poster="img/bj.jpg">
<source src="許嵩、黃齡 - 驚鴻一面.mp4" type="video/mp4"></source>
<source src="許嵩捕传、黃齡 - 驚鴻一面.ogv" type="video/ogg"></source>
<source src="許嵩惠拭、黃齡 - 驚鴻一面.webm" type="video/webm"></source>
<source src="許嵩、黃齡 - 驚鴻一面.mkv" type="video/mkv"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
當(dāng)前瀏覽器不支持 video直接播放庸论，點擊這里下載視頻： <a href="myvideo.webm">下載視頻</a>
</video>
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<video id="video" src="許嵩职辅、黃齡 - 驚鴻一面.mkv" width="500" controls loop poster="img/bj.jpg">
您的瀏覽器不支持video標(biāo)簽
</video>
<br />
<button id="load">重新加載</button>
<button id="play">播放</button>
<button id="pause">暫停</button>
<button id="muted">靜音</button>
<button id="pp">播放/暫停</button>
<button id="max">最大化</button>
</body>
<script type="text/javascript">
var video=document.getElementById("video");
var loadBtn=document.getElementById("load");
var playBtn=document.getElementById("play");
var pauseBtn=document.getElementById("pause");
var mutedBtn=document.getElementById("muted");
var ppBtn=document.getElementById("pp");
var max=document.getElementById("max");
var playStatus=false;
loadBtn.onclick=function(){
video.load();
}
playBtn.onclick=function(){
video.play();
}
pauseBtn.onclick=function(){
video.pause();
}
mutedBtn.onclick=function(){
if (playStatus==false) {
video.volume=0;
} else{
video.volume=0.5;
}
playStatus=!playStatus;
}
ppBtn.onclick=function(){
if (playStatus==false) {
video.play();
} else{
video.pause();
}
playStatus=!playStatus;
}
max.onclick=function(){
video.webkitRequestFullScreen();
}
</script>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
