如何包裝HTML5視頻元素的currentTime屬性？

Question

我正在開發視頻播放器作為學習模塊系統的一部分。 某些模塊要求用戶不能（輕松）跳過視頻。 我了解這通常被認為是糟糕的用戶體驗，但是在這種情況下這是必不可少的。

通過執行以下操作，我已經能夠覆蓋video.currentTime屬性。 它可以防止跳過，但是我需要能夠有條件地打開和關閉它。

Object.defineProperty(videoElement, 'currentTime', {
  enumerable: true,
  configurable: true,
  get: function() {
    // return from original currentTime
  },
  set: function(newValue) {
    // intercept values here
  }
});

如何在getter和setter中引用原始的video.currentTime屬性？ 不幸的是， Object.getOwnPropertyDescriptor(videoElement, 'currentTime'); 返回undefined 。

Answer 1

可能有一種更優雅的方法，但是在對象上調用原型的currentTime getter （在本例中為HTMLMediaElement原型）將為您提供實際的currentTime。 因此，這將阻止設置，但允許獲取：

  Object.defineProperty(videoElement, 'currentTime', {
      enumerable: true,
      configurable: true,
      get: function() {
        var ct = Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype,
           'currentTime').get.call(this);
        return ct;
      },
      set: function(newValue) {
        // intercept values here
      }
    });

Answer 2

如果要禁用搜索（跳過），那么這是我的解決方案：

var video = document.getElementById('video');
var supposedCurrentTime = 0;
video.addEventListener('timeupdate', function() {
  if (!video.seeking) {
        supposedCurrentTime = video.currentTime;
  }
});
// prevent user from seeking
video.addEventListener('seeking', function() {
  // guard agains infinite recursion:
  // user seeks, seeking is fired, currentTime is modified, seeking is fired, current time is modified, ....
  var delta = video.currentTime - supposedCurrentTime;
  if (Math.abs(delta) > 0.01) {
    console.log("Seeking is disabled");
    video.currentTime = supposedCurrentTime;
  }
});
// delete the following event handler if rewind is not required
video.addEventListener('ended', function() {
  // reset state in order to allow for rewind
    supposedCurrentTime = 0;
});

該代碼僅在搜索時將video.currentTime還原為其最后的已知值。 這有效地取消了尋找過程。 無需覆蓋/包裝currentTime。

包裝currentTime的問題在於，如果用戶足夠聰明以選擇視頻元素並設置其currentTime屬性，則可能是該用戶足夠聰明來調用：

Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype,
       'currentTime').set.call(videoElement, videoElement.duration);