JSFiddle - React, Tailwind, and code Playground

by zainshaikh

HTML

<video id='video' width="460" height="320"
      controls preload='none' 
      poster="http://media.w3.org/2010/05/sintel/poster.png">
      <source id='mp4'
        src="http://media.w3.org/2010/05/sintel/trailer.mp4"
        type='video/mp4'>
      <source id='webm'
        src="http://media.w3.org/2010/05/sintel/trailerRun.webm"
        type='video/webm'>
      <source id='ogv'
        src="http://media.w3.org/2010/05/sintel/trailer.ogv"
        type='video/ogg'>
      <p>Your user agent does not support the HTML5 Video element.</p>
            </video>
            
            <table summary='The Media Events table contains the number of times each media event has been received'>
      <caption>Media Events</caption>
      <tbody id='events'>
      </tbody>
    </table>

JavaScript

document._video = document.getElementById("video");


var media_events = []
media_events["seeking"] = 0;
media_events["seeked"] = 0;

init_events();


function init_events() {

    for (key in media_events) {
        document._video.addEventListener(key, capture, false);
    }

    var tbody = document.getElementById("events");
    var i = 1;
    var tr = null;
    for (key in media_events) {
        if (tr == null) tr = document.createElement("tr");
        var th = document.createElement("th");
        th.textContent = key;
        var td = document.createElement("td");
        td.setAttribute("id", "e_" + key);
        td.innerHTML = "0";
        td.className = "false";
        tr.appendChild(th);
        tr.appendChild(td);

        if ((i++ % 5) == 0) {
            tbody.appendChild(tr);
            tr = null;
        }


    }
    if (tr != null) tbody.appendChild(tr);
}



function capture(event) {
    media_events[event.type] = media_events[event.type] + 1;
    for (key in media_events) {
        var e = document.getElementById("e_" + key);
        if (e) {
            e.innerHTML = media_events[key];
            if (media_events[key] > 0) e.className = "true";
        }
    }
    update_properties();
}



function update_properties() {
    var i = 0;
    for (key in media_properties) {
    var val = eval("document._video." + media_properties[key]);
    /*
    if (typeof val === "TimesRanges") {
        val = val.length + " TimeRanges";
    }
    */
    media_properties_elts[i++].innerHTML = val;
    }
    if (!!document._video.audioTracks) {
    var td = document.getElementById("m_audiotracks");
    td.innerHTML = document._video.audioTracks.length;
    td.className = "true";
    }
    if (!!document._video.videoTracks) {
    var td = document.getElementById("m_videotracks");
    td.innerHTML = document._video.videoTracks.length;
    td.className = "true";
    }
    if (!!document._video.textTracks) {
    var td =...