javascript - 如何包装 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

可能有一种更优雅的方法来做到这一点，但是在对象上调用原型(prototype)(在本例中为 HTMLMediaElement 原型(prototype))的 currentTime getter 将为您提供实际的当前时间。因此这将阻止设置但允许获取:

  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
      }
    });