JSFiddle - React, Tailwind, and code Playground

HTML

<h2>HTML5 Video WebGL Test</h2>
<ul>
    <li>This is a very simple test-case / example for using a HTML5 video as WebGL texture.</li>
    <li>This example just plays a small video via WebGL, nothing else (view page source).</li>
    <li style="color:red;">On Android Chrome this is broken since version 43.0.2357.78</li>
    <li>Chromium Bugreports:
        <ul>
            <li><a href="https://code.google.com/p/chromium/issues/detail?id=494620">https://code.google.com/p/chromium/issues/detail?id=494620</a></li>
        </ul>
    </li>
</ul>

Here a video should be playing:<br>
<canvas id="canvas" width="500" height="375" style="border:1px solid #CCCCCC;"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
    canvas.width = 620;
    canvas.height = 350;
    //canvas.width = nextPowerOf2(500);
    //canvas.height = nextPowerOf2(375);
    var gl = null;
    for (var i=0; i<4; i++)
    {
        gl = canvas.getContext(["webgl","experimental-webgl","moz-webgl","webkit-3d"][i])
        if (gl)
            break;
    }

 

    // prepare WebGL
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    var vs = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vs, "attribute vec2 vx;varying vec2 tx;void main(){gl_Position=vec4(vx.x*2.0-1.0,1.0-vx.y*2.0,0,1);tx=vx;}");
    gl.compileShader(vs);

    var ps = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(ps, "precision mediump float;uniform sampler2D sm;varying vec2 tx;void main(){gl_FragColor=texture2D(sm,tx);}");
    gl.compileShader(ps);

    var shader  = gl.createProgram();
    gl.attachShader(shader, vs);
    gl.attachShader(shader, ps);
    gl.linkProgram(shader);
    gl.useProgram(shader);

    var vx_ptr = gl.getAttribLocation(shader, "vx");
    gl.enableVertexAttribArray(vx_ptr);
    gl.uniform1i(gl.getUniformLocation(shader, "sm"), 0);

    var vx = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vx);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0,0, 1,0, 1,1, 0,1]), gl.STATIC_DRAW);

    var ix = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ix);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0,1,2, 0,2,3]), gl.STATIC_DRAW);

    var tex = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, tex);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T,     gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S,     gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);-
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

    // load the video
    var video = document.createElement("video");
    var...