0

私は最終的にこの問題を解決しました

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

1 に答える 1

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

編集済み

于 2013-06-25T01:09:14.383 に答える