高亮文本

Question

我試着按照與視頻

到目前爲止，我有

(function($){ 


    $.fn.playerConnect = function(player){ 


     var transcriptElements = this; 


     player.onTime(function(evt){ 

     var time = ''; 

     console.log(time);  
}; 


       $.each(transcriptElements, function(){ 
        var start = $(transcriptElements[i]).attr("data-start"); 
        var end = $(transcriptElements[i]).attr("data-start") + $(transcriptElements[i]).attr("data-dur"); 
        var startNum = parseFloat(start); 
        var endNum = parseFloat(end); 
        console.log(startNum); 
        if (time >= startNum && time <= endNum){ 
         $(transcriptElements[i]).addClass("hilite"); 
        } else { 
         $(transcriptElements[i]).removeClass("hilite"); 
        } 
       }); 

     }); 


     return this.click(function(evt){ 

     }) 
    }; 

})(jQuery); 

，我試圖從拉HTML同步文本塊突出的文本塊到hilite被設置成不同的跨度在這裏。我需要採取與視頻中不同時間相對應的每個不同的跨度，並將文本填滿。

<div id="playerDiv">Video Will Appear Here</div> 
     <div id="transcript"> <span class="words" data-start="10.099" data-dur="7"></span> 
     <span class="words" data-start="17.869" data-dur="3.82">Hey this is 
      Dwayne Johnson. While playing astronaut Chuck Baker in the film Planet</span> 
     <span class="words" data-start="21.689" data-dur="0.701">51</span> <span 
      class="words" data-start="22.39" data-dur="3.56">I gained a lot of 
      respect for our nation's space program. NASA makes new</span> <span class="words" 
      data-start="25.95" data-dur="1.35">discoveries about our universe</span> 
     <span class="words" data-start="27.3" data-dur="4.11">every day but one 
      of the coolest things about nasa is the technologies that</span> <span 
      class="words" data-start="31.41" data-dur="1.55">it creates for 
      exploring space</span> <span class="words" data-start="32.96" data-dur="3.739">are 
      also improving life here on earth. NASA technologies can be found</span> 
     <span class="words" data-start="36.699" data-dur="0.621">everywhere</span> 
     <span class="words" data-start="37.32" data-dur="3.71">from the soles of 
      the shoes to the freeze dried fruit in your cereal. These</span> <span 
      class="words" data-start="41.03" data-dur="1.58">technologies, called 
      spinoffs,</span> <span class="words" data-start="42.61" data-dur="4.36">help 
      doctors heal patients with heart problems, scientists track rare 
      animals, and</span> <span class="words" data-start="46.97" data-dur="2.409">firefighters 
      and police officers and soldiers</span> <span class="words" data-start="49.379" 
      data-dur="4.45">stay safe on the job. Space technology has even helped 
      Olympic swimmers win</span> <span class="words" data-start="53.829" data-dur="0.711">gold 
      medals.</span> <span class="words" data-start="54.54" data-dur="3.63">All 
      of these the spinoffs began as innovations for nasa missions</span> <span 
      class="words" data-start="58.17" data-dur="3.86">like the space 
      shuttle, the Hubble Space Telescope, and the International Space</span> 
     <span class="words" data-start="62.03" data-dur="3.18">Station. You 
      don't have to be an astronaut to trace</span> <span class="words" data-start="65.21" 
      data-dur="3.47">space back to where you live. Visit nasa.gov</span> <span 
      class="words" data-start="68.68" data-dur="3.549">to learn more about 
      how nasa technologies play a role in your life.</span> <span class="words" 
      data-start="72.229" data-dur="3.331">After all, there's no space like 
      home</span> </div> 

Answer 1

<style type="text/css"> 
    .hilite { 
     background-color: YELLOW; 
    } 
    </style> 
    <script type="text/javascript"> 
    $(function() { 
    var transcriptElements = $("span"); 
    var i = 0; 
    var time = 18; 
     $.each(transcriptElements, function(){ 
       var start = $(transcriptElements[i]).attr("data-start"); 
       var end = new Number($(transcriptElements[i]).attr("data-start")) + new   Number($(transcriptElements[i]).attr("data-dur")); 
       var startNum = parseFloat(start); 
       var endNum = parseFloat(end); 
       if (time >= startNum && time <= endNum){ 
        $(transcriptElements[i]).addClass("hilite"); 
       } else { 
        $(transcriptElements[i]).removeClass("hilite"); 
       } 
       i++; 
      }); 


      }); 
    </script>