Object.defineProperty is useful for defining or modifying properties. But I faced an interesting scenario redefining a video element’s src attribute.

The Naive Approach (Causes Recursion)

var video = document.createElement('video');
var videos = { comedy: '', drama: '' };

Object.defineProperty(video, 'src', {
  set: function(type) {
    this.src = videos[type];  // Infinite recursion!
  }
});

This causes InternalError: too much recursion (FF) or RangeError: Maximum call stack size exceeded (Chrome).

The Solution: Use setAttribute

Since video is a DOM node with IDL attributes, we can use setAttribute:

Object.defineProperty(video, 'src', {
  set: function(url) {
    this.setAttribute('src', videos[index]);
  }
});

video.src = comedy; // Now works as expected!

The trick is that setAttribute bypasses the property we just defined!