HTML5視頻的倒計時時間留給

Question

我結束了由

$oVideo.bind('timeupdate', function() { 
    var currVideo = document.getElementById("vPlayer"); 
    //console.log(video.attr('id')); 
    var iNow = currVideo.currentTime; 
    //console.log(iNow); 
    var countdown = eval(currVideo.duration - iNow); 
    // countdown = countdown /3600; 
    $('.decr-time').html('-' + rectime(countdown)); 


    if (!bTimeSlide) { 
    $oTimeSlider.slider('value', iNow); 

    } 
    }); 

解決這一問題嘿，我要感謝的人提前。

我需要爲HTML5視頻創建倒數計時器。這是我能夠拼湊在一起的東西。我非常感謝任何能幫助我解決這個問題的人。我的控制檯沒有顯示倒計時的錯誤;但我倒計時似乎沒有工作。

//count down 
    $oVideo.bind('duration', function() { 
      var countdown = $oVideo.duration - $oVideo.currentTime; 
      $down.text(rectime(countdown)); 
      if (! bTimeSlide) 
       $oTimeSlider.slider('value', countdown); 
     }); 

這裏是JavaScript

 var $oMain = $(this); 
     var $oVideo = $('video', $oMain); 
     var $oTimeSlider = $('.time_slider', $oMain); 
     var $oTimer = $('.timer', $oMain); 
     var $down = ('.decr-time', $oMain); 
     var bTimeSlide = false; 

//count up 
     $oVideo.bind('timeupdate', function() { 
      var iNow = $oVideo[0].currentTime; 
      $oTimer.text(rectime(iNow)); 
      if (! bTimeSlide) 
       $oTimeSlider.slider('value', iNow); 
     }); 



///count down 
    $oVideo.bind('duration', function() { 
      var countdown = $oVideo.duration - $oVideo.currentTime; 
      $down.text(rectime(countdown)); 
      if (! bTimeSlide) 
       $oTimeSlider.slider('value', countdown); 
     }); 

HTML

<section class="content-wrapper"> 
     <div class="video_player"> 
      <video controls> 
       <source src="../assets/video.mp4" type="video/mp4" /> 
       <source src="../assets/video.webm" type="video/webm" /> 
       <source src="../assets/video.ogv" type="video/ogg" /> 
      </video> 
       <div class="custom_controls"> 
         <a href="index.html" title="Back" class="back-button"></a> 
         <a class="play" title="Play"></a> 
         <a class="pause" title="Pause"></a> 
         <div class="timer">00:00</div> 
         <div class="time_slider"></div> 
         <div class="decr-time">-00:00</div> 
         </div> 
      </div> 
     </section> 

Answer 1

您已經知道了 'timeupdate' 事件觸發的SNIPPIT，所以你應該能夠做到倒計時Calcs（計算）/顯示器在同一個處理程序中？

基於對這個問題的代碼，...

$oVideo.bind('timeupdate', function() { 
    var video = $(this).get(0); 
    var iNow = video.currentTime; 
    var countdown = video.duration - iNow; 

    $oTimer.text(rectime(iNow)); 
    $down.text(rectime(countdown)); 

    if (!bTimeSlide) { 
     $oTimeSlider.slider('value', iNow); 
    } 
}); 

編輯