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);

我试图从hilite拉到hilite的html设置为不同的跨度就在这里。我需要采用与视频中不同时间相对应的每个不同的跨度，并对文本进行分析。

<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>

突出显示与jw播放器同步的文本

1 个答案: