html自定义视频播放,HTML5 video自定义视频播放器

video

/*body{background:#d0d8e9;}*/

/*要么不加position，如果加了则必须同时设置body和height高度为100%*/html,body{background:#d0d8e9;position:relative;height:100%;

}.box{width:540px;height:332px;box-shadow:0 0 4px #d0d8e9;position:absolute;left:50%;top:50%;margin:-166px 0 0 -270px;}.videoNode{width:540px;height:305px;/*float布局可以清除上下间的空隙*/float:left;background-color:#000;}.ctrNode{width:540px;height:27px;/*gif格式容量更小*/background:url(data/ctrl_bg.gif) repeat-x;float:left;}.playNode{float:left;width:13px;height:15px;margin:6px 0 0 14px;/*png更清晰*/background:url(data/playbtn.png) no-repeat;cursor:pointer;}.pauseNode{float:left;width:13px;height:15px;margin:6px 0 0 14px;/*png更清晰*/background:url(data/pause.png) no-repeat;cursor:pointer;}

/*时间进度条部分*/.processNode{width:260px;height:9px;background:url(data/ctrl_bg.gif) top repeat-x;margin:9px 0 0 14px;float:left;position:relative;}.processLeft{position:absolute;left:-2px;top:0;background:url(data/proleft.png) no-repeat;width:4px;height:9px;}.processRight{position:absolute;right:-2px;top:0;background:url(data/right_bg.png) no-repeat;width:4px;height:9px;}.processCircle{position:absolute;left:-8.5px;top:-3px;background:url(data/circle.png) no-repeat;width:17px;height:17px;cursor:pointer;z-index:5;}.lineNode{width:0%;height:100%;position:absolute;top:0;left:0;background:url(data/line_bg.png) repeat-x;}.lineRight{position:absolute;width:2px;height:7px;top:0;right:0;background:url(data/line_r_bg.png) no-repeat;}

/*声音进度条部分*/.timeNode{float:left;width:57px;height:10px;margin:9px 0 0 9px;}.timeNode span{float:left;line-height:10px;font-size:10px;color:#fff;}.volumeNode{width:19px;height:17px;float:left;margin:6px 10px 0 17px;background:url(data/volume.png) no-repeat;}.vProcessNode{width:61px;height:9px;/*background:url(data/probg.gif) top repeat-x;*/margin:9px 0 0 4px;float:left;position:relative;}.vLineNode{width:61px;height:100%;position:absolute;top:1px;left:0;background:url(data/line_bg.png) repeat-x;}.vLineRight{position:absolute;width:2px;height:7px;top:0;right:0;background:url(data/line_r_bg.png) no-repeat;}#vCircleNode{left:52px;}

/*全屏部分*/.fullNode{width:13px;height:15px;background:url(data/full.png) no-repeat;margin:6px 0 0 40px;float:left;cursor:pointer;}.fullNode:hover{transform:scale(1.1);/*transition:all .5s;*/}