5.标签篇:audio和video
# 5.标签篇:audio和video
- audio 和 video
```html
<style>
* {
margin:0;
padding:0;
}
.video_player{
position:relative;
width:1000px;
height:500px;
margin:0 auto;
}
video{
position:absolute;
width:1000px;
height:500px;
left:0;
top:0;
}
.menu{
position:absolute;
width:100%;
height:50px;
background:rgba(0,0,0,.5);
bottom:0;
display:none;
}
.play{
position:absolute;
width:60px;
height:30px;
border:1px solid white;
text-align:center;
line-height:30px;
border-radius:10px;
margin:auto 0 auto 20px;
top:0;
bottom:0;
cursor:pointer;
}
.time{
position:absolute;
width:100px;
height:30px;
text-align:center;
line-height:30px;
margin:auto 0 auto 20px;
top:0;
bottom:0;
cursor:pointer;
}
.progress_bar{
position:absolute;
width:100%;
height:2px;
background:gray;
left:0;
top:-2px;
}
.progress_bar div{
position:absolute;
width:0px;
height:2px;
background:orange;
left:0;
top:0;
}
.progress_bar i{
position:absolute;
width:6px;
height:6px;
background:white;
border-radius:3px;
left:120px;
top:-2px;
}
.quick{
position:absolute;
width:60px;
height:30px;
border:1px solid white;
text-align:center;
line-height:30px;
color:white;
border-radius:10px;
margin:auto 0 auto 20px;
top:0;
left:800px;
bottom:0;
cursor:pointer;
}
.quick_list{
position:absolute;
width:80px;
height:120px;
background:pink;
left:800px;
top:-120px;
color:#fff;
background-color:rgba(0,0,0,.5);
display:none;
}
.quick_list li{
position:relative;
width:100%;
height:30px;
text-align:center;
line-height:30px;
list-style:none;
cursor:pointer;
}
.quick_list li:hover{
color:green;
}
.vol_add{
position:absolute;
width:60px;
height:30px;
border:1px solid white;
text-align:center;
line-height:30px;
color:white;
border-radius:10px;
margin:auto 0 auto 20px;
top:0;
left:500px;
cursor:pointer;
}
.vol_ins{
position:absolute;
width:60px;
height:30px;
border:1px solid white;
text-align:center;
line-height:30px;
color:white;
border-radius:10px;
margin:auto 0 auto 20px;
top:0;
left:580px;
cursor:pointer;
}
.full_screen{
position:absolute;
width:60px;
height:30px;
border:1px solid white;
text-align:center;
line-height:30px;
color:white;
border-radius:10px;
margin:auto 0 auto 20px;
top:0;
left:880px;
cursor:pointer;
}
</style>
<div class="video_player">
<video src="view.mov"></video>
<div class="menu">
<div class="play">播放</div>
<div class="time">0:00/0:00</div>
<div class="progress_bar">
<div></div>
<i></i>
</div>
<div class="quick">倍速</div>
<div class="quick_list">
<ul>
<li>正常</li>
<li>1.25</li>
<li>1.5</li>
<li>2.0</li>
</ul>
</div>
<div class="vol_add">音量加</div>
<div class="vol_ins">音量减</div>
<div class="full_screen">全屏</div>
</div>
</div>
<script>
var videoPlayer = document.getElementByClassName("video_player")[0];
var menu = document.getElementByClassName("menu")[0];
var play = document.getElementByClassName("play")[0];
var video = document.getElementsByTagName("video")[0];
var time = document.getElementByClassName("time")[0];
var progressBar = document.getElementByClassName("progress_bar")[0];
var quick = document.getElementByClassName("quick")[0];
var quickList = document.getElementByClassName("quick_list")[0];
var volAdd = document.getElementByClassName("vol_add")[0];
var volIns = document.getElementByClassName("vol_ins")[0];
var fullScreen = document.getElementByClassName("full_screen")[0];
videoPlayer.onmouseenter = function(){
menu.style.display = "block";
};
videoPlayer.onmouseleave = function(){
menu.style.display = "none";
};
play.onclick = function(){//视频播放与暂停
if(video.paused){//视频处于暂停状态
video.play();//视频播放
play.innerHTML = "暂停";
}else{
video.pause();//视频暂停
play.innerHTML = "播放";
}
};
setInterval(function(){
var total = video.duration;//视频总时长
var nowTime = video.currentTime;//当前播放时间
time.innerHTML = parseInt(nowTime/60) + ":" + parseInt(nowTime%60) + "/" + parseInt(total/60) + ":" + parseInt(total%60);//设置播放时间
var progressBarWidth = nowTime / total * progressBar.clientWidth;
progressBar.getElementsByTagName("div")[0].style.width = width + "px";
progressBar.getElementsByTagName("i")[0].style.left = width + "px";
}, 1000);
progressBar.onmouseenter = function(){
progressBar.style.height = "14px";
progressBar.style.top = "-14px";
progressBar.getElementsByTagName("div")[0].style.height = "14px";
progressBar.getElementsByTagName("i")[0].style.height = "18px";
};
progressBar.onmouseleave = function(){
progressBar.style.height = "2px";
progressBar.style.top = "-2px";
progressBar.getElementsByTagName("div")[0].style.height = "2px";
progressBar.getElementsByTagName("i")[0].style.height = "6px";
};
progressBar.onclick = function(e){
var location = e.layerX;
var width = progressBar.clientWidth;
var targetTime = location / width * video.duration;
video.currentTime = targetTime;//只有在响应头(Response Headers)里面有Content-Range属性，才能进行进度跳转，否则不能进行跳转
};
quick.onclick = function(){
quickList.style.display = "block";
}
quick.onmouseleave = function(){
quickList.style.display = "none";
}
var liList = quickList.getElementsByTagName("ul")[0].getElementsByTagName("li");
for(var i = 0; i < liList.length; i++){
list[i].index = i;
list[i].onclick = function(){
if(this.index == 0){//正常
video.playbackRate = 1;//设置速率
quick.innerHTML = "倍速";
}else if(this.index == 1){//1.25
video.playbackRate = 1.25;
quick.innerHTML = "x 1.25";
}else if(this.index == 2){//1.5
video.playbackRate = 1.5;
quick.innerHTML = "x 1.5";
}else if(this.index == 3){//2
video.playbackRate = 2;
quick.innerHTML = "x 2";
}
}
}
volAdd.onclick = function(){
video.volume = video.volume + 0.1 > 1 ? 1 : video.volume + 0.1;
}
volIns.onclick = function(){
video.volume = video.volume - 0.1 < 0 ? 0 : video.volume - 0.1;
}
fullScreen.onclick = function(){
var dom = document.documentElement;
dom.requestFullscreen();//全屏
videoPlayer.style.width = window.screen.width + "px";
videoPlayer.style.height = window.screen.height + "px";
video.style.style.width = window.screen.width + "px";
video.style.style.height = window.screen.height + "px";
}
videoPlayer.onmousemove = function(){
//利用函数防抖控制菜单隐藏，未实现
menu.style.display = "block";
};
</script>
```
以上是markdown格式的笔记
赞 (0)