Observe attribute changes, method calls and events fired on a media element

media-element-observer-iife.js

(function (video) {
    function toString() {
        return ((video.parentNode ? ('<' + video.parentNode.nodeName + '>') : '') + '<' + video.nodeName + '>')
            .toLowerCase();
    }
    function videoEventHandler(e) {
        console.warn(toString() + ' >> "' + e.type + '"');
    }
    const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
    if (MutationObserver) {
        const observer = new MutationObserver((mutations) => {
            mutations.forEach(function(mutation) {
                console.warn(toString() + ' mutation', mutation);
            });
        });
        observer.observe(video, {
            attributes: true
        });
    }
    const load = video.load;
    const pause = video.pause;
    const play = video.play;
    video.load = function() {
        console.error(toString() + '.load()', video.src);
        return load.call(this);
    };
    video.pause = function() {
        console.error(toString() + '.pause()');
        return pause.call(this);
    };
    video.play = function() {
        console.error(toString() + '.play()');
        return play.call(this);
    };
    [
        'loadstart',
        'progress',
        'suspend',
        'abort',
        'error',
        'emptied',
        'stalled',
        'loadedmetadata',
        'loadeddata',
        'canplay',
        'canplaythrough',
        'playing',
        'waiting',
        'seeking',
        'seeked',
        'ended',
        'durationchange',
        'timeupdate',
        'play',
        'pause',
        'ratechange',
        'resize',
        'volumechange'
    ].forEach((eventName) => {
        video.addEventListener(eventName, videoEventHandler);
    });
}(mediaElement));