requestVideoFrameCallback with legacy mode to requestAnimationFrame

VideoAnimation

const supportsFrameCallback = 'requestVideoFrameCallback' in HTMLVideoElement.prototype,
requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame,
cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;

export default class VideoAnimation {
    constructor(callback, video) {
        this.callback = callback,
        this.video = video,
        this.animationID = null,
        this.running = false;
    }

    setCallback(callback) {
        this.callback = callback;
    }

    animateLegacy() {
        this.callback();
        this.animationID = requestAnimationFrame(() => this.animateLegacy());
    }

    animate(now, metadata) {
        this.callback(now, metadata);
        this.video.requestVideoFrameCallback(this.animateRef);
    }

    start() {
        this.stop();

        if (supportsFrameCallback) {
            this.animateRef = (now, metadata) => this.animate(now, metadata);
            this.video.requestVideoFrameCallback(this.animateRef);
        } else {
            this.animateLegacy();
        }
        
        this.running = true;
    }

    stop() {
        this.running = false;

        if (supportsFrameCallback) {
            this.animateRef = () => {};
        } else {
            cancelAnimationFrame(this.animationID && this.animationID.data && this.animationID.data.handleId || this.animationID);
        }
    }
}