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

        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'事件会触发，所以你应该可以在同一个处理程序中进行倒计时计算/显示吗？

根据问题中的代码，......

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

编辑

html5视频倒计时时间

1 个答案: