JSFiddle - React, Tailwind, and code Playground

by sesubash

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

            <td width="640" height="480" >
                <div id="pluginOptions1" >
                </div>
        <div id="containerDiv1" >
    <div id="navigation1" style="background-color:transparent">
    <canvas id='drawingCanvas1' width='640' height='480'></canvas></div>
        <div id="Plugin1" style="width: 640px; height: 480px;"></div>

        </div>
        </td>

CSS

#containerDiv1 { 
      width: 640px;
          height: 480px;
          position: relative;
        }         

        #Plugin1 {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }

        #navigation1 {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
        #navigation1 {
          z-index: 1000;
        }
        #Plugin1 {
          z-index: 0;
        }
        body { font-size: 11.2px !important ;  }

JavaScript

function InsertVLC()
    {
     $("#Plugin1").html(InsertPlugin("http://13.126.69.77:6604/3/5?DownType=3&jsession=&DevIDNO=00384&FLENGTH=798505482&FOFFSET=0&MTYPE=1&FPATH=/sd/2019-09-05/H20190905-050000P4N1F0.264"));
    }

    function InsertPlugin(streamURL){
    var strVLC = "";
    strVLC = "<object id=playerId classid='clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921' toolbar='false' controls='false' width='640px'  height='480px' events='True'>";
    strVLC += "<param name='AutoPlay' value='true' />";
    strVLC += "<param name='ShowDisplay' value='true' />";
    strVLC += "<param name='Controls' value='false' />";
    strVLC += "<param name='Toolbar' value='false' />";
    strVLC += "<param name='Src' value='" + streamURL + "' />";
    //strVLC += "<PARAM NAME='BaseURL' VALUE='file:///C:/TEST.HTML'>";
    strVLC += "<embed type='application/x-vlc-plugin'   progid='VideoLAN.VLCPlugin.2' name='video1' id='video1' autoplay='yes' controls='false' loop='yes' width='640px' height='480px' target='" + streamURL + "' pluginspage='http://www.videolan.org' />";
    strVLC += "</object>";

   return strVLC;
}

InsertVLC();