音频播放器audio
语法
第一种
<audio src="音频路径"></audio>
第二种
<audio>
<source src="路径1"/>
<source src="路径2"/>
<source src="路径3"/>
无法播放提示
</audio>
标签属性
| 属性 | 说明 |
|---|---|
| controls | 是否显示控件/按钮 |
| autoplay | 是否自动播放 |
| loop | 是否循环播放 |
| preload | 取值：none/auto/meta 表示播放前是否缓存 |
视频播放器video
语法
第一种
<video src="视频路径"><video/>
第二种
<video>
<source src="路径1"/>
<source src="路径2"/>
<source src="路径3"/>
无法播放提示
</video>
标签属性
| 属性 | 说明 |
|---|---|
| controls | 是否显示控件/按钮 |
| autoplay | 是否自动播放 |
| loop | 是否循环播放 |
| preload | 取值：none/auto/meta 表示播放前是否缓存 |
| width/height | 播放器窗口尺寸 |
获取只读属性
| 属性 | 说明 |
|---|---|
| paused | 获取当前是否暂停，返回true/false |
| ended | 获取当前是否停止，返回true/false |
| duration | 获取全部时长 |
取值+赋值属性
| 属性 | 说明 |
|---|---|
| currentTime | 返回从播放到现在的距离（通常与事件timeupdate连用） |
| volume | 音量，取值在0-1.0之间 |
| muted | 是否静音 |
方法
| 方法 | 说明 |
|---|---|
| play() | 媒体播放 |
| pause() | 媒体暂停 |
事件
| 事件 | 说明 |
|---|---|
| canplay | 可以播放时执行 |
| timeupdate | 事件更新时执行 |
示例
自定义播放器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.controls {
width: 800px;
height: 50px;
padding-top: 12px;
box-sizing: border-box;
background: linear-gradient(rgb(242, 240, 241), rgb(221, 221, 221));
}
.controls>div {
float: left;
}
.play {
margin: 0px 10px;
width: 20px;
height: 20px;
background: url("/素材/images/sprite.png") no-repeat;
background-position: -9px -8px;
}
.progress-p {
margin-top: 5px;
width: 500px;
height: 10px;
border-radius: 5px;
overflow: visible;
background-color: rgb(112, 109, 109);
}
.prog-p {
float: left;
width: 0px;
height: 10px;
border-radius: 5px;
background: url("/素材/images/play-bar.png");
}
.progress-p>.prog-p>span {
float: right;
position: relative;
top: -3px;
left: 6px;
width: 16px;
height: 18px;
background: url("/素材/images/handle.png") no-repeat;
}
.progress-v {
margin-top: 5px;
width: 100px;
height: 10px;
border-radius: 5px;
background-color: rgb(112, 109, 109);
}
.prog-v {
float: left;
width: 0px;
height: 10px;
border-radius: 5px;
}
.progress-v span {
float: right;
position: relative;
left: 8px;
width: 10px;
height: 10px;
background: url("/素材/images/volume.png") no-repeat -2px;
background-size: auto 11px;
}
.time {
margin: 0px 10px;
}
.big {
width: 20px;
height: 20px;
margin-left: 10px;
background: url("素材/images/sprite.png") no-repeat -160px;
}
</style>
</head>
<body>
<video src="素材/weixin.mp4" width="800px"></video>
<div class="controls">
<div class="play"></div>
<div class="progress-p">
<div class="prog-p"><span></span></div>
</div>
<div class="time">
<span class="timePlay">00:00</span>
/
<span class="timeAll">00:00</span>
</div>
<div class="progress-v">
<div class="prog-v"><span></span></div>
</div>
<div class="big"></div>
</div>
<script>
var video = document.querySelector("video")
var big = document.querySelector(".big")
var play = document.querySelector(".play")
var timePlay = document.querySelector(".timePlay")
var timeAll = document.querySelector(".timeAll")
var progP = document.querySelector(".prog-p")
var spanP = document.querySelector(".prog-p span")
var progressP = document.querySelector(".progress-p")
var progV = document.querySelector(".prog-v")
var spanV = document.querySelector(".prog-v span")
var progressV = document.querySelector(".progress-v")
video.addEventListener("canplay", function () {
//点击播放
index = 0;
play.onclick = function () {
if (index == 0) {
play.style.backgroundPosition = "-52px -8px"
video.play();
index++;
} else {
play.style.backgroundPosition = "-9px -8px"
video.pause();
index = 0;
}
//获取初始声音
video.volume = 0;
//点击后获取总时长
var allTimeM = parseInt(video.duration / 60);
var allTimeS = parseInt(video.duration % 60);
allTimeM = allTimeM < 10 ? "0" + allTimeM : allTimeM
allTimeS = allTimeS < 10 ? "0" + allTimeS : allTimeS
timeAll.innerHTML = allTimeM + ":" + allTimeS;
//播放时长
}
var playTime;
video.addEventListener("timeupdate", function () {
playTime = video.currentTime;
var pTimeM = parseInt(playTime / 60);
var pTimeS = parseInt(playTime % 60);
pTimeM = pTimeM < 10 ? "0" + pTimeM : pTimeM;
pTimeS = pTimeS < 10 ? "0" + pTimeS : pTimeS;
timePlay.innerHTML = pTimeM + ":" + pTimeS;
progP.style.width = (progressP.offsetWidth * playTime / video.duration) + "px"
})
var change = 0;
var isDown = false;
var startX;
spanP.addEventListener("mousedown", function (e) {
var x = e.clientX;
startX = progP.offsetWidth;
change = x;
isDown = true;
})
progressP.addEventListener("mousemove", function (e) {
if (!isDown) {
return;
}
var newX = e.clientX;
progP.style.width = startX + (newX - change) + "px";
video.currentTime = progP.offsetWidth / progressP.offsetWidth * video.duration
playTime = video.currentTime
})
document.addEventListener("mouseup", function () {
isDown = false;
})
//全屏
big.addEventListener("click", function () {
video.requestFullscreen();
})
})
//声音
var cc = 0;
var isDownV = 1;
var startXV;
spanV.addEventListener("mousedown", function (e) {
var a = e.clientX;
startXV = progV.offsetWidth;
cc = a;
isDownV = 2;
})
progressV.addEventListener("mousemove", function (e) {
if (isDownV != 2) {
return;
}
var nn = e.clientX;
progV.style.width = startXV + (nn - cc) + "px";
if (parseInt(progV.offsetWidth) >= 95) {
video.volume = 1
progV.style.width = 95 + "px";
} else {
video.volume = progV.offsetWidth / 95
}
})
document.addEventListener("mouseup", function () {
isDownV = 1;
})
</script>
</body>
</html>
今天的分享就是这些啦，欢迎正在学习web的伙伴们“挑毛病”“提意见”，当然了也欢迎各种表扬奥～（比心，比心）
4865
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
