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

media-element-observer.js

const mediaElement = document.createElement('video');

function toString(video) {
    return ((video.parentNode ? ('<' + video.parentNode.nodeName + '>') : '') + '<' + video.nodeName + '>')
        .toLowerCase();
}
function videoEventHandler(e) {
    console.warn(toString(e.target) + ' >> "' + e.type + '"');
}

function observe(video) {
    
    const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
    if (MutationObserver) {
        const observer = new MutationObserver((mutations) => {
            mutations.forEach(function(mutation) {
                console.warn(toString(video) + ' 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(video) + '.load()', video.src);
        return load.call(this);
    };
    video.pause = function() {
        console.error(toString(video) + '.pause()');
        return pause.call(this);
    };
    video.play = function() {
        console.error(toString(video) + '.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);
    });
}

observe(mediaElement);

mediaElement.load();
mediaElement.src = '';
mediaElement.play();