JSFiddle - React, Tailwind, and code Playground

by Ramya Ranganathan

HTML

<title>Multimedia Player</title>
    
 <body>
     
   <div id="container">
       
     <h1>Multimedia Player With Advanced Controls</h1>
     <p> &nbsp; </p>
     <h3 class="features">Code Features:</h3>
     <ol>
       <li>Minimized Number of Event Listeners</li>
     <ol>
     <p> &nbsp; </p>
     <h3 class="listofcontrols">List of Controls:</h3>
     <ol>
       <li>Play/Pause </li>
       <li>Mute/Unmute </li>
       <li>Fullscreen </li>
       <li>Timing Slider Bar </li>
       <li>Volume Slider Bar </li>
       <li>Zoom-In ('+') </li>
       <li>Zoom-Out ('-') </li>
       <li>Left (⇠) </li>
       <li>Right  (⇢) </li>
       <li>Up  (⇡) </li>
       <li>Down  (⇣) </li>
       <li>Rotate Left (&#x21bb;) </li>
       <li>Rotate Right (&#x21ba;) </li>
     </ol>
  <div id="stage">
    <video id="video" width="800" height="450">
      <source src="http://s3.amazonaws.com/akamai.netstorage/HD_downloads/Orion_SM.mp4" type="video/mp4">              
        <p>Your browser doesn't support the HTML5 video tag it seems. 
           You can see this video as part of a collection 
           <a href="http://s3.amazonaws.com/akamai.netstorage/HD_downloads/"></a>.
        </p> 
          <div id= 
    </video>
  </div>
  <div id="controls">
      <button type="button" id="play-pause" class="play">&#9658</button>
      <input type="range" id="seek-bar" class="seek-bar" value="0">
      <button type="button" id="mute" class="mute">Mute</button>
      <input type="range" id="volume-bar" class="volume-bar" min="0" max="1" step="0.1" value="1">
      <button type="button" id="full-screen" class="fullscreen">Full Screen</button>
  </div>
  <div id="advancedcontrols">
  </div>

JavaScript

var btn = document.getElementById("doit").onclick = function() {
    
    // we'll traverse the DOM looking for H tags
    
    
    function traverse(el,fn) {
        fn(el);
        for(var i=0;i<el.children.length;i++){
            traverse(el.children[i],fn);
        }
    }
    
    //we'll collect the H elements in an array .
    
    
    
    var hList = new Array();
    function collectHeadings(e){
        if(e,nodeName,indexOf("H")==0) {
            hList.push(e);
        }
    }
    traverse(document.body,collectHeadings);
    console.log(hList.length);
    
    //create a div to begin our table of contents
    
    var list = document.createElement("div");
    
    
    //for each heading
   
    
    for(var i=0;i<hList.length;i++) {
        var orderedList = document.createElement("ol");
        ol.setAttribute("name","location"+i);
        hList[i].parentNode.insertBefore(ol,hList[i]);
        
        
        //create link with the heading text,that links to the ol.
        
        var l = document.createElement("li");
        
        
        //get the indent level of each one 
        
        var tag = hList[i].nodeName;
        var level =tag.charAt(1);
        
        //setting some styles
        
        l.setAttribute("class","toc"+level);
        var ol = document.createElement("ol");
        ol.setAttribute("name","location"+i);
        var t = document.createTextNode(hList[i].textContent);
        ol.appendChild(t);
        l.appendChild(ol);
        
        //add l to the list
        list.appendChild(l);
    }
    
    //apply the new DIV to the page
    
    document.getElementById("toc").appendChild(list);
}