1、简易播放器：

  1. 控制条的实现：
  2. <style>
  3.     *{
  4.         margin: 0px;
  5.         padding: 0px;
  6.     }
  7.    .video_player{
  8.     position: relative;
  9.     width: 1000px;
  10.     height: 500px;
  11.     margin: 0px auto;
  12.    }
  13.    video{
  14.     position: absolute;
  15.     width: 1000px;
  16.     height: 500px;
  17.     left: 0px;
  18.     top: 0px;
  19.    }
  20.    .menu{
  21.        position: absolute;
  22.        width: 100%;
  23.        height: 50px;
  24.        background-color: rgba(0,0,0,0.5);
  25.        bottom: 0px;
  26.        display: none;
  27.    }
  28. </style>
  29. </head>
  31. <body>
  32. <div class="video_player">
  33. <!--video与audio是一样的，只比audio多一个视频，方法都一样  -->
  34. <video src="contenteditable.mov" controls></video><!-- 加controls才能有播放栏 -->
  35. <div class="menu"></div>
  36. </div>
  38. <script>
  39.     var videoPlayer = document.getElementsByClassName("video_player")[0];
  40.     var menu = document.getElementsByClassName('menu')[0];
  41.     videoPlayer.onmouseenter = function() {
  42.         menu.style.display = "block";
  43.     }
  44.     videoPlayer.onmouseleave = function(){
  45.         menu.style.display = "none";
  46.     }
  47. </script>
  48. </body>