Create a countdown timer in javascript that starts countdown after 1 hr

Anthony Vu

I'm trying to create a page where a 1 hr video displays. Towards the end of the video, lets say at 53 min, I would like a countdown timer to display with a link.

I've searched the internet to try to find a solution, but I have only found a reference that starts a countdown timer immediately, as seen here.

NOTE: I would also like to take the current time (once the timer starts) so I can pass it in php as a $_GET variable.

This is my HTML:

        <h1>Countdown Clock</h1>
<div id="clockdiv">
  <!-- <div>
    <span class="days"></span>
    <div class="smalltext">Days</div>
  </div> -->
  <div>
    <span class="hours"></span>
    <div class="smalltext">Hours</div>
  </div>
  <div>
    <span class="minutes"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>

This is my JavaScript:

            function getTimeRemaining(endtime) {
      var t = Date.parse(endtime) - Date.parse(new Date());
      var seconds = Math.floor((t / 1000) % 60);
      var minutes = Math.floor((t / 1000 / 60) % 60);
      var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
      var days = Math.floor(t / (1000 * 60 * 60 * 24));
      return {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
      };
    }

    function initializeClock(id, endtime) {
      var clock = document.getElementById(id);
      // var daysSpan = clock.querySelector('.days');
      var hoursSpan = clock.querySelector('.hours');
      var minutesSpan = clock.querySelector('.minutes');
      var secondsSpan = clock.querySele`enter code here`ctor('.seconds');

      function updateClock() {
        var t = getTimeRemaining(endtime);

        // daysSpan.innerHTML = t.days;
        hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
        minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
        secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

        if (t.total <= 0) {
          clearInterval(timeinterval);
        }
      }

      updateClock();
      var timeinterval = setInterval(updateClock, 1000);
      return
    }

    var currentdate = new Date(); 
    var dateTime =  (currentdate.getTime()/1000)/60;
    var startTimer = (dateTime)+.1;



    var deadline = new Date(Date.parse(new Date()) +60 * 60 * 1000);
    initializeClock('clockdiv', deadline);



    Any help would be appreciated. 
    Thanks!
jdphenix

If you're using HTML5 video, you can use it's API to do this pretty easily. This depends on an IIFE to create a closure to keep the state around, because in my quick testing for this, the event still fired multiple times before the event was unsubscribed.

Replace alert('Almost done...!') with your code to start the countdown.

document.
querySelector('video').
addEventListener('timeupdate', function almostdone(e) {
  var _ = e.target,
    fired = false;
  (function() {
    if (_.currentTime / _.duration > .8 && !fired) {
      _.removeEventListener('timeupdate', almostdone);
      fired = true;
      alert('Almost done...!');
    }
  })();
});
<video controls="" autoplay="" height="360" width="640">
  <!-- MP4 must be first for iPad! -->
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
    <!-- Safari / iOS, IE9 -->
    <source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">
      <!-- Chrome10+, Ffx4+, Opera10.6+ -->
      <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg">
        <!-- Firefox3.6+ / Opera 10.5+ -->
        <!-- fallback to Flash: -->
        <object type="application/x-shockwave-flash" data="player.swf" height="360" width="640">
          <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
          <param name="movie" value="player.swf">
          <param name="flashvars" value="autostart=true&amp;controlbar=over&amp;image=poster.jpg&amp;file=http://clips.vorwaerts-gmbh.de/VfE_flash.mp4">
          <!-- fallback image -->
          <img src="poster.jpg" alt="Big Buck Bunny" title="No video playback capabilities, please download the video below" height="360" width="640">
        </object>
</video>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Create a countdown timer in javascript that starts countdown after 1 hr

From Dev

Create a countdown timer on a event

From Dev

JavaScript shipping timer countdown

From Dev

Countdown timer javascript

From Dev

Countdown timer javascript

From Dev

Javascript countdown timer logic

From Dev

Javascript loop countdown timer

From Dev

Error: JavaScript countdown timer doesnot countdown

From Dev

Continue countdown timer after pause

From Dev

How to create a "countdown timer" GIF?

From Dev

Create Countdown Timer Based On String

From Dev

How to create an advanced countdown timer

From Dev

Create expired time, or countdown timer

From Java

The simplest possible JavaScript countdown timer?

From Dev

JavaScript Countdown Timer Code [JS]

From Dev

javascript countdown timer pause resume

From Dev

How to autostart a JavaScript Countdown Timer

From Dev

Countdown timer javascript error on pause

From Dev

Javascript countdown timer for auction site

From Dev

Countdown timer in javascript using setTimeout

From Dev

JavaScript Countdown Timer Code [JS]

From Dev

Javascript countdown timer with multiple use

From Dev

Javascript repeating countdown timer to midday

From Dev

Javascript Countdown Timer with User input

From Dev

JavaScript countdown timer with cookies stops after one minute

From Dev

javascript countdown timer, interval speeds up after click event

From Dev

Multiple CountDown Timer running one after another

From Dev

Multiple CountDown Timer running one after another

From Dev

How to continue the countdown timer after closing ViewController