码迷,mamicode.com
首页 > Web开发 > 详细

html---自定义视频播放控制台

时间:2015-05-12 09:30:19      阅读:285      评论:0      收藏:0      [点我收藏+]

标签:html5   视频播放   

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gbk">
        <style>
         #box{
          width:500px;
          height:40px;
          background:#ff0000;
          border-radius:10px;  <!--圆角-->
          box-shadow:1px 1px 2px 2px #232;   <!--阴影-->
          border:1px solid #ff0000
         }
         .play{   <!--用css画三角形-->
          width:0px;height:0px;
          border-left:16px solid #fff;
          border-top:12px solid rgba(255,255,255,0); <!--rgba指定颜色-->
          border-bottom:12px solid rgba(255,255,255,0);
          float:left;
          margin-top:10px;
          margin-left:10px;cursor:pointer;
         }
         .pause{   <!--用css画两条竖线--> 
           width:6px;height:18px;
           border-left:4px solid #fff;
           border-right:4px solid #fff;
           float:left;
           margin-top:10px;
           margin-left:10px;cursor:pointer;
         }

        #progress{
          float:left;
          width:60%;height:8px;background:#fff;
          box-shadow:1px 1px 2px 2px #232;
          border-radius:5px;
          margin-top:16px;
          margin-left:16px;
          position:relative;
        }
        #bar{
         width:10%;height:100%;background:#ccc;border-radius:3px;
         display:inline-block;position:absolute;top:0;left:0;
        }
        #control{
          width:17px;height:17px;position:absolute;border-radius:100%;
          left:0;top:-4px;background:#fff;box-shadow:1px 1px 2px 2px #132;
          cursor:pointer;
        }
        .soundon{
          width:10px;height:8px;
          border-right:13px solid #fff;
          border-top:6px solid rgba(255,255,255,0);
          border-bottom:6px solid rgba(255,255,255,0);
          float:left;
          margin-top:10px;
          margin-left:10px;cursor:pointer;
        }

        .soundoff{
          width:10px;height:8px;
          border-right:13px solid #000;
          border-top:6px solid rgba(255,255,255,0);
          border-bottom:6px solid rgba(255,255,255,0);
          float:left;
          margin-top:10px;
          margin-left:3px;cursor:pointer;
        }

         #volume{
          float:left;
          width:15%;height:5px;background:#fff;
          box-shadow:1px 1px 2px 2px #232;
          border-radius:5px;
          margin-top:16px;
          margin-left:2px;
          position:relative;
        }
        #volume-bar{
         width:10%;height:100%;background:#ccc;border-radius:3px;
         display:inline-block;position:absolute;top:0;left:0;
        }
        #volume-control{
          width:15px;height:15px;position:absolute;border-radius:100%;
          left:0;top:-4px;background:#fff;box-shadow:1px 1px 2px 2px #132;
          cursor:pointer;
        }
        #full{
          width:15px;height:15px;border:3px solid #ccc;cursor:pointer;float:left;
          margin-top:10px;margin-left:15px;transition:0.5s all;
        }
        #full:hover{
          width:20px;height:20px;border:3px solid #ccc;cursor:pointer;float:left;
          margin-top:7px;margin-left:13px;
        }
        </style>
        <script>
           window.onload=function  () {
            //box对象
            var box=document.getElementById("box");
            //视频对象
            var video=document.getElementById("video");
            //播放按钮
            var play=document.getElementById("play");
            //进度条
            var progress=document.getElementById("progress");
            //灰色进度条
            var bar=document.getElementById("bar");
            //声音按钮
            var control=document.getElementById("control");

            //喇叭
            var sound=document.getElementById("sound");

            //全屏
            var full=document.getElementById("full")
            full.addEventListener("click",function  () {
               //video.mozRequestFullScreen()
               video.webkitRequestFullScreen()
            },false)
            play.onclick=function  () {
              if(video.paused){
                play.className="pause";
                video.play();
              }else{
                play.className="play";
                video.pause();
              }
            }
            //进度条
            video.addEventListener("timeupdate",function  () {
              var scales=video.currentTime/video.duration;
              bar.style.width=progress.offsetWidth*scales+"px";
              control.style.left=progress.offsetWidth*scales+"px";
            },false);

            //进度条拖拽
           control.onmousedown=function  (e) {
             video.pause();
             document.onmousemove=function  (e) {
               var leftv=e.clientX-progress.offsetLeft-box.offsetLeft;
               if(leftv<=0){
                leftv=0;
               }
               if(leftv>=progress.offsetWidth){
               leftv=progress.offsetWidth;
               }
               control.style.left=leftv+"px"
             }
             document.onmouseup=function  () {
               var scales=control.offsetLeft/progress.offsetWidth;
                video.currentTime =video.duration*scales;
                video.play();
                document.onmousemove=null;
                document.onmousedown=null;
             }
           }
              sound.onclick=function  () {
                if(video.muted){
                   video.muted=false;
                   sound.className="soundon"
                }else{
                  video.muted=true;
                  sound.className="soundoff"
                }
              }
           }
        </script>
    </head>
    <body>
       <video src="iceage4.mp4" controls=controls id="video">
       </video>
       <div id="box">
            <!--播放暂停按钮-->
            <div id="play" class="play">
            </div>
            <!--进度条-->
            <div id="progress">
                 <span id="bar">
                 </span>
                 <div id="control">
                 </div>
            </div>
            <!--喇叭-->
            <div id="sound" class="soundon">
            </div>
            <!--声音控制-->
            <div id="volume">
                 <span id="volume-bar">
                 </span>
                 <div id="volume-control">
                 </div>
            </div>

            <div id="full">
            </div>
       </div>
    </body>
</html>

html---自定义视频播放控制台

标签:html5   视频播放   

原文地址:http://blog.csdn.net/sjtu_chenchen/article/details/45651029

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!