本篇博客接着上一篇文章,实现了一个带样式的video播放控件,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>video control</title>
<link rel="stylesheet" type="text/css" href="../css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="../css/myplay.css">
</head>
<body>
<figure>
<figcaption>视频播放</figcaption>
<div class="player">
<video id="myVideo" src="../mov/mov_bbb.mp4"></video>
<div class="controls">
<a href="javascript:#" class="switch fa fa-play"></a>
<a href="javascript:#" class="expend fa fa-expand"></a>
<div class="progress">
<div class="line"></div>
<div class="bar"></div>
</div>
<div class="times">
<span class="current">00:00:00</span>/
<span class="totalTime">00:00:00</span>
</div>
</div>
</div>
</figure>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
//获取视频对象 H5写法
var myVideo = document.querySelector("#myVideo");
//播放或暂停
document.querySelector('.switch').addEventListener("click",function(){
//切换播放样式 jq写法
$('.switch').toggleClass("fa-play fa-pause");
//判断当前视频是否暂停
if(myVideo.paused){
myVideo.play();//播放
}else{
myVideo.pause();//暂停
}
});
//全屏
function goFullScreen() {
element = document.getElementById('myVideo');
if (element.requestFullscreen) { //w3c
element.requestFullscreen();
} else if (element.mozRequestFullScreen) { //moz Firefox
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) { //IE
element.msRequestFullscreen();
} else if (element.oRequestFullscreen) { //Opera
element.oRequestFullscreen();
} else if (element.webkitRequestFullscreen) { //webkit内核 Chrome Safari
element.webkitRequestFullScreen();
} else {
var docHtml = document.documentElement;
var docBody = document.body;
var cssText = 'width:100%;height:100%;overflow:hidden;';
docHtml.style.cssText = cssText;
docBody.style.cssText = cssText;
element.style.cssText = cssText + ';' + 'margin:0px;padding:0px;';
document.IsFullScreen = true;
}
}
//退出全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.oCancelFullScreen) {
document.oCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else {
var docHtml = document.documentElement;
var docBody = document.body;
var videobox = document.getElementById('videobox');
docHtml.style.cssText = "";
docBody.style.cssText = "";
videobox.style.cssText = "";
document.IsFullScreen = false;
}
}
//判断是否全屏
function isFullScreen(){
return document.fullscreen ||
document.msFullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreen ||
document.oFullScreen ||
document.webkitIsFullScreen;
}
//全屏和退出全屏
$(".expend").on("click",function(){
//切换样式
$(".expend").toggleClass("fa-expand fa-compress")
if(isFullScreen()){
exitFullscreen();
}else{
goFullScreen();
}
});
//拖动进度时
$(".bar").on("click",function(e){
var time = myVideo.duration*(e.offsetX/$(".bar").width());
myVideo.currentTime = time;
});
//更新播放进度
myVideo.addEventListener("timeupdate",function(){
//更新进度条
var pValue = (myVideo.currentTime/myVideo.duration)*100;
$(".line").css("width",pValue+"%");
//显示当前播放进度的时间
document.querySelector(".current").innerText = getTimeBySecond(myVideo.currentTime);
});
//播放结束时
myVideo.addEventListener("ended",function(){
//播放按钮类样式进行还原
$(".switch").removeClass("fa-pause").addClass("fa-play");
$(".line").css("width",0);
//设置当前播放时间
myVideo.currentTime = 0;
//视频播放状态为设置为停止
myVideo.pause();
});
//当视频元数据加载时运行
myVideo.addEventListener("loadedmetadata",function(){
//设置总时长
document.querySelector(".totalTime").innerText = getTimeBySecond(myVideo.duration);
});
//讲当前秒数转换为时间
function getTimeBySecond(second){
var hour = parseInt(second / (60* 60));
var minute = parseInt((second/60) % 60);
var second = parseInt(second % 60);
return (hour < 10 ? "0" + hour:hour) + ":" + (minute < 10 ? "0" + minute:minute) + ":" + (second < 10 ? "0" + second:second);
};
</script>
</body>
</html>
css样式表
.body{
padding: 0;
margin: 0;
background-color: #FFF;
}
figcaption{
text-align: center;
font-size: 24px;
margin: 20px;
}
a{
text-decoration: none;
}
.player{
width: 720px;
height: 360px;
margin: 0 auto;
background-color: #000;
position: relative;
}
video{
height: 100%;
margin: 0 5% 0 5%;
}
.controls{
width: 720px;
height: 40px;
background-color: #1C192C;
position: absolute;
left: 0px;
bottom: 0px;
z-index: 100;
border-radius: 4px;
}
.controls .switch{
float: left;
width: 20px;
height: 20px;
color:#fff;
position: absolute;
top:11px;
left:11px;
}
.controls .expend{
float: right;
width: 20px;
height: 20px;
color:#fff;
position: absolute;
top:11px;
right:11px;
}
.progress{
width: 500px;
height: 10px;
border-radius: 3px;
background-color: #999;
position: absolute;
top:15px;
left: 35px;
}
.progress .line{
width: 0;
height: 100%;
background-color:#F7F5F5;
left: 0;
top: 0;
position: absolute;
}
.progress .bar{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.times{
position: absolute;
top: 11px;
right: 45px;
color: #fff;
font-size: 14px;
}