html5 video标签自定义控制条
2016-07-11 17:20
316 查看
最近做项目时要用到播放视频，采用的是h5的video标签，但是控制条不好看，所以想着自己做一套控制条！
此种做法在电脑上可以，但是在手机上不行，因为在手机上video标签被浏览器解析为本地播放器，默认opcaity处于最大，切控制条不能被隐藏，在手机上暂时没想到好的方法，用画布canvas，可以实现，但是好像css水平的问题，自己在实践过程中并没有达到想要的效果（显示很小）。。。特此做一标记，留待以后有时间继续研究
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta name="wap-font-scale" content="no">
<meta name="format-detection" content="telephone=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="blank">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<script type="text/javascript" src="http://m.the3ctv.com/wap/jquery/jquery-1.8.3.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://m.the3ctv.com/wap/css/common.css">
<title>播放</title>
<style type="text/css">/*控制条的样式*/
.video_play_main_div{background-color:#000000;width:100%;height:100%;}
.video_play_main_div .header{height:45px;}
.video_play_main_div .header a:nth-child(1){display: block;float: left;}
.video_play_main_div .header a:nth-child(1) img{height: 20px;margin-top: 12.5px;margin-left: 12.5px;}
.video_play_main_div .header a:nth-child(2){display: block;float: right;}
.video_play_main_div .header a:nth-child(2) img{height: 35px;margin-top: 5px;margin-right: 7px;}
.video_play_main_div .play_video{width:100%;position:absolute;top:50%;}
.video_play_main_div .play_video .preview{display:none;top: 50%;position: relative;height: 20px;text-align: center;background-color: white;border-radius: 20px;width: auto;}
.video_play_main_div .replay_name{color: white;position: absolute;bottom: 0px;margin-bottom: 20%;width: 100%;text-align: center;}
.the3ctv_video_control{width:100%;position:absolute;top: 61%;z-index: 3;background-color: black;height: 32px;}
.the3ctv_video_control a:nth-child(1){position: relative;float: left;}
.the3ctv_video_control a:nth-child(1) img{width: 25px;margin-left: 10px;}
.the3ctv_video_control em{float:left;color:white;margin-top:4px;}
.the3ctv_video_control em i:nth-child(1){}
.the3ctv_video_control em i:nth-child(2){color:#b4b4b4;}
.the3ctv_video_control span{display: block;height: 4px;width: 52%;margin-left: 2%;background-color: #505050;border-radius: 4px;margin-top: 11px;float:left;}
.the3ctv_video_control span b:nth-child(1){z-index:1;float:left;position:relative;width: 0%;background-color: #b4b4b4;display: block;height: 100%;border-radius: 4px;}
.the3ctv_video_control span b:nth-child(2){z-index:2;position:relative;float: left;width: 8px;height: 8px;background-color: white;border-radius: 8px;margin-top: -2px;margin-left: -8px;}
.the3ctv_video_control span b:nth-child(3){position: relative;background-color: white;display: block;height: 4px;border-radius: 4px;}
.the3ctv_video_control u{float:left;}
.the3ctv_video_control u img{display: block;width: 25px;margin-left: 5px;}
.trump-control-bottom,.trump-control-bottom-flow{display:none;}
video::-webkit-media-controls-enclosure {
/*禁用播放器控制栏的样式*/
/*display: none !important;*/
}
</style>
<script type="text/javascript">
var flag = false;
var initProgressBar = function(){ //进度条相关操作
var main_div = $("#wap_video_play_main_div");
var video = $("video",main_div);
var timeDrag = false; /* Drag status */
$("span[name='progress']",main_div).mousedown(function(e) { //进度条的按下操作
timeDrag = true;
updatebar(e.pageX);
});
$(document).mouseup(function(e) { //松开
if(timeDrag) {
timeDrag = false;
updatebar(e.pageX);
}
});
$(document).mousemove(function(e) { //鼠标移动事件
if(timeDrag) {
updatebar(e.pageX);
}
});
//update Progress Bar control
var updatebar = function(x) { //更新时间与播放条进度
var progress = $("span[name='progress']",main_div);
var maxduration = video[0].duration; //Video duraiton
var position = x - progress.offset().left; //Click pos
var percentage = 100 * position / progress.width();
//Check within range
if(percentage > 100) {
percentage = 100;
}
if(percentage < 0) {
percentage = 0;
}
//Update progress bar and video currenttime
$("span b:eq(0)",main_div).css('width', percentage+'%');
video[0].currentTime = maxduration * percentage / 100;
if(percentage==100){
$("a[name='pause'] img",main_div).attr("src","F://pause.png")
}
};
$('u img',main_div).unbind().bind('click', function() { //控制视频全屏与退出全屏
//For Webkit
video[0].webkitEnterFullscreen();
//For Firefox
video[0].mozRequestFullScreen();
video[0].controls=false;
return false;
});
}
var initTimeLength = function(timeLength){ //根据秒数格式化时间
timeLength = parseInt(timeLength);
var second = timeLength%60;
var minute = (timeLength-second)/60;
return (minute<10?"0"+minute:minute)+":"+(second<10?"0"+second:second);
}
var initVideo = function(player){
flag = true;
var main_div = $("#wap_video_play_main_div");
main_div.on("click","a[name='pause']",function(){ //暂停 继续
var video = $("video",main_div);
video.css("top","0px")
video.css("top","50%")
if(video[0].paused) {
video[0].play();
$("img",$(this)).attr("src","F://playing.png")
}else {
video[0].pause();
$("img",$(this)).attr("src","F://pause.png")
}
return false;
});
$("video",main_div).on('loadedmetadata', function() { //获取全部视频长度
var video = $("video",main_div);
$("i:eq(1)",main_div).html(initTimeLength(video[0].duration));
});
$("video",main_div).on('timeupdate', function() { //实时更新播放进度条和时间
var video = $("video",main_div);
var currentPos = video[0].currentTime; //Get currenttime //当前时间
var maxduration = video[0].duration; //Get video duration //总时间
var percentage = 100 * currentPos / maxduration; //in %
$("i:eq(0)",main_div).html(initTimeLength(video[0].currentTime));
$("span b:eq(0)",main_div).css("width",percentage+"%")
$("i:eq(1)",main_div).html(initTimeLength(video[0].duration));
if(currentPos==maxduration){
$("a[name='pause'] img",main_div).attr("src","F://pause.png")
}
});
//$("video",main_div)[0].controls=false;
//$("video",main_div).removeAttr("controls");
//$("video",main_div).attr("controls",null); //隐藏控制条
var startBuffer = function() { //预加载视频的
var video = $("video",main_div);
var maxduration = video[0].duration;
var currentBuffer = video[0].buffered.end(0);
var percentage = 100 * currentBuffer / maxduration;
$("span b:eq(2)").css('width', percentage+'%');
if(currentBuffer < maxduration) {
setTimeout(startBuffer, 500);
}
};
// setTimeout(startBuffer, 500);
initProgressBar();
}
var setControl = function(){
initVideo();
// $("#wap_video_play_main_div video").removeAttr("controls");
// $(".trump-control-bottom,.trump-control-bottom-flow").hide();
// $("#trump_main_unique_1 div[data-resize-module='bottom']").closest("div").hide();
}
$(function(){
var main_div = $("#wap_video_play_main_div");
main_div.height($(window).height());
var height = ($(window).width()/16)*9;
$("video",main_div).height(height).css("margin-top",-(height/2))
setControl()
});
</script>
</head>
<body>
<div class="video_play_main_div" id="wap_video_play_main_div">
<video controls="controls" autobuffer oncontextmenu="return false;" preload="none" x-webkit-airplay="true" webkit-playsinline="true" id="video_id_1464329192793" width="100%" style="z-index: 1; overflow: hidden; box-sizing: border-box; position: absolute; left: 0px; top: 50%;">
<source src="http://200004500.vod.myqcloud.com/200004500_44e60aba1da111e689690f47f5e05cec.f30.mp4" type="video/mp4">
</video>
<div class="the3ctv_video_control">
<a name="pause">
<img src="F://pause.png"/>
</a>
<em><i name="time">00:00</i> | <i>01:21</i></em>
<span name="progress">
<b></b>
<b></b>
<b></b>
</span>
<u><img alt="" src="http://m.the3ctv.com/wap/images/video/fullScreen.png"/></u>
</div>
</div>
</body>
</html>此种做法在电脑上可以，但是在手机上不行，因为在手机上video标签被浏览器解析为本地播放器，默认opcaity处于最大，切控制条不能被隐藏，在手机上暂时没想到好的方法，用画布canvas，可以实现，但是好像css水平的问题，自己在实践过程中并没有达到想要的效果（显示很小）。。。特此做一标记，留待以后有时间继续研究
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐