video和audio学习
video——视频
src 地址
autoplay 自动播放
loop 循环播放
poster 封面地址
<video>
<flash></flash>
</video>
video支持什么格式——通用格式mp4
IE wmv、mp4
Chrome webq、mp4
FireFox ogv、mp4
audio——mp3
JS接口
.play() 播放
.pause() 暂停
.stop() ×
pause+currentTime
.currentTime 当前播放位置(s)
.duration 长度(s)
.volume 音量：0-100
.muted 静音：bool
demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.box {width:500px; background:#eee; height:20px;}
.box .child {background:green; height:20px; width:0}
</style>
<script>
window.onload=function (){
let oV=document.getElementById(‘v1‘);
let oBtn1=document.getElementById(‘btn1‘);
let oBtn2=document.getElementById(‘btn2‘);
let oBtn3=document.getElementById(‘btn3‘);
let oBtn4=document.getElementById(‘btn4‘);
let oChild=document.querySelector(‘.child‘);
oBtn1.onclick=function (){
oV.play();
};
oBtn2.onclick=function (){
oV.pause();
};
oBtn3.onclick=function (){
oV.pause();
oV.currentTime=0;
};
oBtn4.onclick=function (){
alert(`${oV.currentTime}|${oV.duration}`);
};
oV.addEventListener(‘timeupdate‘, function (){
oChild.style.width=parseInt(100*oV.currentTime/oV.duration)+‘%‘;
}, false);
oV.muted=true;
};
</script>
</head>
<body>
<input type="button" value="播放" id="btn1">
<input type="button" value="暂停" id="btn2">
<input type="button" value="停止" id="btn3">
<input type="button" value="查看当前进度" id="btn4">
<br>
<div class="box">
<div class="child"></div>
</div>
<video src="https://vd1.bdstatic.com/mda-hjmhaxk5y6zh8vxm/mda-hjmhaxk5y6zh8vxm.mp4" controls id="v1">
</video>
</body>
</html>
时间： 2024-11-09 00:10:48