H5视频接口案例
同一各浏览器的默认样式
效果如下：
视频播放器.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$cysky$</title>
<link rel="stylesheet" href="./css/font-awesome.css">
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div class="playerTitle">视频播放器</div>
<div class="player">
<video src="./mp4/chrome.mp4"></video>
<div class="controls">
<a href="javascript:" class="switch fa fa-play"></a>
<a href="javascript:" class="expand fa fa-expand"></a>
<div class="progress">
<div class="bar"></div>
<div class="loaded"></div>
<div class="elapse"></div>
</div>
<div class="time">
<span class="currentTime">00:00:00</span>
\
<span class="totalTime">00:00:00</span>
</div>
</div>
</div>
<script src="./js/jquery.min.js"></script>
<script>
$(function () {
var video = $("video")[0];
$(".switch").click(function () {
if (video.paused) {
video.play();
} else {
video.pause();
}
$(this).toggleClass("fa-pause fa-play")
});//点击切换播放/暂停
$(".expand").click(function () {
if (video.requestFullscreen) {
video.requestFullscreen()
} else if (video.webkitRequestFullScreen) {
video.webkitRequestFullScreen()
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen()
} else if (video.msRequestFullScreen) {
video.msRequestFullScreen()
}
});//点击切换全屏
video.oncanplay = function () {
setTimeout(function () {
video.style.display = 'block';
var total = video.duration;
var result = getResult(total);
$(".totalTime").html(result)
}, 2000)
}//总时长
function getResult(time) {
var hour = Math.floor(time / 3600);
hour = hour < 10 ? "0" + hour : hour;
var minute = Math.floor(time % 3600 / 60);
minute = minute < 10 ? "0" + minute : minute;
var second = Math.floor(time % 60);
second = second < 10 ? "0" + second : second;
return hour + ":" + minute + ":" + second;
} //封装获取时长
video.ontimeupdate = function () {
var current = video.currentTime;
var result = getResult(current);
$(".currentTime").html(result);
var percent = current / video.duration * 100 + "%";
$(".elapse").css("width",percent)
}//设置播放显示进度条和时间
$(".bar").click(function(e){
var offset = e.offsetX;
var percent = offset/$(this).width();
var current = percent*video.duration;
video.currentTime = current;
})//点击切换观看地点
video.onended = function () {
video.currentTime = 0;
$(".switch").removeClass("fa-pause").addClass("fa-play")
}//播放完毕重置
})
</script>
</body>
</html>
body{
padding: 0;
margin: 0;
font-family: "microsoft yahei","Helvetica",'simhei','sans-serif';
background-color: #f7f7f7;
}
a{
text-decoration: none;
}
.playerTitle{
width: 100%;
margin: 0 auto;
line-height: 100px;
font-size: 40px;
text-align: center;
}
.player{
width: 720px;
height: 360px;
margin: 0 auto;
background: url("../images/loading.gif") center no-repeat;
background-size: cover;
position: relative;
}
video{
height: 100%;
margin: 0 auto;
display: none;
}
.controls {
width: 720px;
height: 40px;
position: absolute;
left: 0;
bottom: -40px;
background-color: black;
}
.controls .switch{
width: 20px;
height: 20px;
display: block;
font-size: 20px;
color: #fff;
position: absolute;
left: 10px;
top: 10px;
}
.controls .expand{
width: 20px;
height: 20px;
font-size: 20px;
position: absolute;
right: 10px;
top:10px;
color: #fff;
}
.controls .progress{
width: 430px;
height: 10px;
position: absolute;
left: 40px;
bottom: 15px;
background-color: #555;
}
.controls .progress .bar{
width: 100%;
height: 100%;
border-radius: 3px;
cursor: pointer;
position: absolute;
left: 0;
top: 0;
opacity: 0;
z-index: 999;
}
.controls .progress .elapse{
width: 0%;
height: 100%;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 0;
top: 0;
z-index: 3;
}
.controls .progress .loaded{
width: 60%;
height: 100%;
background-color: #999;
border-radius: 3px;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.controls .time{
height: 20px;
position: absolute;
left: 490px;
top: 10px;
color: #fff;
font-size: 14px;
}
网友评论