1、时间进度：

  1. <style>
  2.     *{
  3.         margin: 0px;
  4.         padding: 0px;
  5.     }
  6.    .video_player{
  7.     position: relative;
  8.     width: 1000px;
  9.     height: 500px;
  10.     margin: 0px auto;
  11.    }
  12.    video{
  13.     position: absolute;
  14.     width: 1000px;
  15.     height: 500px;
  16.     left: 0px;
  17.     top: 0px;
  18.    }
  19.    .menu{
  20.        position: absolute;
  21.        width: 100%;
  22.        height: 50px;
  23.        background-color: rgba(0,0,0,0.5);
  24.        bottom: 0px;
  25.        display: none;
  26.    }
  27.    .play{
  28.        position: absolute;
  29.        width: 60px;
  30.        height: 30px;
  31.        border: 1px solid white;
  32.        text-align: center;
  33.        line-height: 30px;
  34.        color: white;
  35.        border-radius: 10px;
  36.        margin-left: 20px;
  37.        top: 50%;
  38.        margin-top: -15px;
  39.        cursor: pointer;
  40.    }
  41.    .time{
  42.        position: absolute;
  43.        width: 100px;
  44.        height: 30px;
  45.        text-align: center;
  46.        line-height: 30px;
  47.        color: white;
  48.        border-radius: 10px;
  49.        margin-left: 120px;
  50.        top: 50%;
  51.        margin-top: -15px;
  52.        cursor: pointer;
  53.    }
  54. </style>
  55. </head>
  57. <body>
  58. <div class="video_player">
  59. <!--video与audio是一样的，只比audio多一个视频，方法都一样  -->
  60. <video src="contenteditable.mov" controls></video><!-- 加controls才能有播放栏 -->
  61. <div class="menu">
  62.     <div class="play">播放</div>
  63.     <div class="time">0：00/0：00</div>
  64. </div>
  65. </div>
  67. <script>
  68.     var videoPlayer = document.getElementsByClassName("video_player")[0];
  69.     var video = videoPlayer.getElementsByTagName("video")[0];
  70.     var menu = document.getElementsByClassName('menu')[0];
  71.     var play = document.getElementsByClassName("play")[0];
  72.     var time = document.getElementsByClassName("time")[0];
  73.     videoPlayer.onmouseenter = function() {
  74.         menu.style.display = "block";
  75.     }
  76.     videoPlayer.onmouseleave = function(){
  77.         menu.style.display = "none";
  78.     }
  79.     play.onclick = function(){
  80.        if(video.paused){
  81.         video.play();
  82.         play.innerHTML = "暂停";
  83.        }else{
  84.            video.pause();
  85.            play.innerHTML = "播放";
  86.        }
  87.     }
  89.     setInterval(function(){
  90.         var total = video.duration;//一共的时间
  91.         var nowtime = video.currentTime;//当前的时间
  92.         time.innerHTML = parseInt(nowtime / 60) + ":" + parseInt(nowtime % 60) + "/" + parseInt(total / 60) + ":" + parseInt(total % 60) ;
  93.     },1000)
  95. </script>
  96. </body>