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