一、 视频掌握

视频停息

对照本身手头的网站源码和现实天生的页面后，发明源码中包含了视频地点的 <video> 标签，在现实页面中，会再天生一个子节点，视频播放掌握，须要对这个子节点设置才见效。

<!-- 现实天生的页面的源码 -->
<div id="videodis" src="video/1.mp4">
  <video id="videodis_html5_api" src="video/1.mp4"></video>
</div>

// 视频停息代码
<script type="text/javascript">
  var videoNode = document.getElementById('videodis_html5_api');
  // http://stackoverflow.com/questions/19355952/make-html5-video-stop-at-indicated-time
  // 下面这个函数可以使视频只停息一次
  // 通例的pause要领,只需视频播放时长凌驾指定时候
  // 就会一向实行停息函数
  var pausing_function = function(){
    // currentTime 的单元为秒，有些时候属性单元为毫秒，要区分好
    if(this.currentTime >= 2) {
      this.pause();
      videoOverlay();
      // 停息播放后，移除事宜监听器
      // 不然视频播放只需凌驾2秒，就会一向被停息
      this.removeEventListener("timeupdate",pausing_function);
    }
  };
  videoNode.addEventListener("timeupdate", pausing_function);
</script>

二、视频掩盖

这个功用的道理很简单，就是在视频地区再增加一个雷同位置雷同尺寸的同级节点，并让该节点的 z-index 属性大于视频节点的属性即可，以下只摘录症结代码：

<script type="text/javascript">
  var overlayNode = document.createElement('div');
  // 由于视频节点是一般的节点,所以直接让须要掩盖在其上的新节点宽高与其雷同即可
  // clientWidth属性只要数值，所以还需手动加上 'px' 这个单元
  overlayNode.style.width = videoNode.clientWidth + 'px';
  // http://stackoverflow.com/questions/9191803/why-does-z-index-not-work
  // 只要设置了position属性的元素,z-index才对其起作用
  overlayNode.style.position = 'relative';
  overlayNode.style.zIndex = 20;
</script>