JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<div align="center" style="font-family: Verdana; width:900;" onMouseDown="myCloseHack( );">
    <img src="graphics/ReturnToVR.png" style="cursor:pointer" alt="Return to VR" width="600" height="84" align="top" />
    <br>
    <br>
    <div id="time" align="center" style="font-family: Verdana;">time</div>
    <table width="550" border="0" cellpadding="0">
        <tr>
            <td align="center" valign="top" id="myMovieLongName" style="font-size: large; text-align: center;">Long Name Here</td>
        </tr>
    </table>
    <div class='video' style='position: relative'>
        <video id="myMovie" width="480" height="342" controls autoplay onMouseDown="event.stopPropagation()"></video>
        <div class='left'>1</div>
        <div class='center'>2</div>
        <div class='right'>3</div>
    </div>
    <table width="550" border="0" cellpadding="0">
        <tr>
            <td align="center" valign="top" id="myMovieDescr" style="font-size: medium; text-align: center;">Description Here</td>
        </tr>
    </table>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <br>
</div>

CSS

body {
    margin-left: 0px;
    margin-top: 0px;
    background-color: #FFF;
}
.video {
    width: 480px;
}
.video div {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 1px solid black;
}
.video div.left {
    left: 0px;
}
.video div.right {
    right: 0px;
}
.video div.center {
    left: 50%;
}

JavaScript

var gTheVideo;

function myDebug(str) {
    // alert(str);
}

function myOnLoad() {

    var myMovieLongName = "";
    var movieID = location.search.substring(1);
    myDebug("URLstring: movieID=" + movieID);

    var i = movieinfo.indexOf(movieID); // must be unique in movieinfo.js file to work right
    if (i < 0) i = 0; // not found, use Error info (item 0) from list
    myDebug(i);

    myMovieLongName = movieinfo[i + 1]; // can have embedded HTML
    document.getElementById("myMovieLongName").innerHTML = "<b>" + myMovieLongName + "</b>";
    myDebug("myMovieLongName=" + myMovieLongName);

    var myMovieShortName = movieinfo[i + 2];
    // document.getElementById("shortName").innerHTML = myMovieLongName;
    myDebug("myMovieShortName=" + myMovieShortName);

    var myMovieURL = "video/" + movieinfo[i + 3]; // movie in same folder as index page
    myDebug("myMovieURL=" + myMovieURL + ".mp4");

    var myMovieDescr = movieinfo[i + 4]; // can have embedded HTML
    document.getElementById("myMovieDescr").innerHTML = myMovieDescr;
    myDebug("myMovieDescr=" + myMovieDescr);

    window.document.title = "My-VR: " + myMovieLongName;

    gTheVideo = document.getElementById("myMovie");

    if (gTheVideo.canPlayType("video/mp4")) {
        gTheVideo.src = myMovieURL + ".mp4";
        //window.alert("can play mp4");

    } else if (gTheVideo.canPlayType("video/ogg")) {
        gTheVideo.src = myMovieURL + ".ogg";
        //window.alert("can play ogg");

    } else {
        window.alert("Your browser can't play mp4 or ogg videos, sorry.");
    }

    // setInterval(function( ){myTimer( )},1000);

}

function myTimer() {
    document.getElementById("time").innerHTML += "<br>" + gTheVideo.currentTime;
}

// movieInfo.js

/* FORMAT:
"movie_b",
	"#MovieLongName B#",
	"#MovieShortName B#",
	"#MovieURL B#",
	"#MovieDescr #",

*/

var movieinfo = new Array(

    "*notFound*", // must come first in this list
"ERROR: Video not found",
    "ERROR: Video not found",
   ...