Video.js視頻控制及進度欄標記

1、 視頻控制

視頻暫停

對比本身手頭的網站源碼和實際生成的頁面後，發現源碼中包含了視頻地址的 <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>

2、視頻覆蓋

這個功能的原理很簡單，就是在視頻區域再添加一個相同位置相同尺寸的同級節點，並讓該節點的 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>