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: 100px;
  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. </style>
  42. </head>
  44. <body>
  45. <div class="video_player">
  46. <!--video与audio是一样的，只比audio多一个视频，方法都一样  -->
  47. <video src="contenteditable.mov" controls></video><!-- 加controls才能有播放栏 -->
  48. <div class="menu">
  49.     <div class="play">播放</div>
  50. </div>
  51. </div>
  53. <script>
  54.     var videoPlayer = document.getElementsByClassName("video_player")[0];
  55.     var video = videoPlayer.getElementsByTagName("video")[0];
  56.     var menu = document.getElementsByClassName('menu')[0];
  57.     var play = document.getElementsByClassName("play")[0];
  58.     videoPlayer.onmouseenter = function() {
  59.         menu.style.display = "block";
  60.     }
  61.     videoPlayer.onmouseleave = function(){
  62.         menu.style.display = "none";
  63.     }
  64.     play.onclick = function(){
  65.        if(video.paused){
  66.         video.play();
  67.         play.innerHTML = "暂停";
  68.        }else{
  69.            video.pause();
  70.            play.innerHTML = "播放";
  71.        }
  72.     }
  73. </script>
  74. </body>