JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

JavaScript

var videoElement;
_.limit = function(fn, num) {
    return function() {
        return fn.apply(this, Array.prototype.slice.call(arguments, 0, num));
    }
}

function supported_video_formats(video) {
    var types = ["video/webm", "video/mp4", "video/3gpp", "video/ogg"];

    function chooser (choice, canPlay) {
        return canPlay === choice;
    }

    var canPlayType = _.limit(video.canPlayType.bind(video), 1);
    var canProbablyPlay = _.compose(_.partial(chooser, "probably"), canPlayType);
    var canMaybePlay = _.compose(_.partial(chooser, "maybe"), canPlayType);
    
    return {
        probably: types.filter(canProbablyPlay),
        maybe: types.filter(canMaybePlay)
    };
    
}
 
function play_video(video_name, width, height) {
        //var canvas = document.getElementById('c');
        //var ctx = canvas.getContext('2d');
        videoElement = document.createElement("video");
        document.body.appendChild(videoElement);
        videoElement.setAttribute("style", "display: none");
        videoElement.setAttribute("controls", "false");
       
        video_type = supported_video_format(videoElement); // 'ogv';
 console.log(video_type);
        videoElement.setAttribute("src", video_name + "." + video_type);
 
        var ctx = video_layer.getCanvas().getContext();
        var video = document.getElementById('v');
 
        videoElement.addEventListener("ended", function() {
                setTimeout('video_layer.hide()', 1000*3);
        });
 
        videoElement.addEventListener('play', function () {
                var $this = this; //cache
                (function loop() {
                        if (!$this.paused && !$this.ended) {
                               
                                ctx.drawImage($this, 0, 0, width, height);
 
                                setTimeout(loop, 1000 / 30); // drawing at 30fps
                        }
                })();
        }, 33);
 
        videoElement.play();
}

play_video('test',...