Skip to content

music-practice-tools/youtube-current-time

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

youtube-current-time

Provides a large clear current play time display when YouTube videos are playing embedded in a webpage. Ideal for when listening to the audio while viewing the rest of a page. The current play time stays visible at all times in a fixed position and floating above the page contents, even when the player is scrolled off the screen.

  • Cue on a time when listening
  • Note when something happens

Project was designed to support interactive music activities in the Musical U Musician's Ear course.

A large clear timer overlayed on a video

Try and install

The Test Page contains 2 embedded YouTube video and instructions for installing a bookmark that makes it easy to show the time on a webpage.

If you need to manually create a favourite then use this code as the Location or URL field:

javascript: (function() {
  d = document;
  s = d.createElement("script");
  s.type = "text/javascript";
  s.src =
    "https://raw.githack.com/music-practice-tools/youtube-current-time/master/ytct.js";
  d.getElementsByTagName("head")[0].appendChild(s);
})();

Some browsers require that you first bookmark any site and then edit the bookmark.

In general, to use YouTube Time:

  • open a web page with a YouTube video player on it;
  • click the bookmark / favourite 'YouTube Time';
  • play and pause the video(s)

Note the bookmark will reload the videos on a page so the players reset to the start

The timer needs reloading every time the page is refreshed or a new page is opened, Simply click the bookmark again.

Notes

You'll need a modern browser. The latest Firefox, Chrome, Edge, Edge Chromium and Safari (MacOS and iPad) are all OK.

You also need a browser that supports bookmarks so that would appear to limit it's use to desktop browsers and not mobile browsers.

Code Notes

The bookmark is a standard Javascript Bookmarklet that injects the ytct.js script into the current page.

The ytct.js code does a crude check for ES6 support and alerts the user if not availale. Otherwise, the code loads ytct-es6.js which injects the YouTube iFrame API so it can access the current time. It also injects styles for the CSS time popup. The video is reloaded with an option to enable the API. APi start and stop events control an Interval which triggers polling the player current time and the display through setting a data-attribute to the time.

The code has to keep polling the YouTube player for the time so it will use a little more power than when it is not running. That was a consideration when setting the poll rate and it can't be too long or there are obvious glitchs with the 1 second updates. When the current video is paused the polling stops.

When there are multiple players the time display tracks the one last started.

The Play / Pause button simply calls the API to paly / Pause the video.

You can always include the code directly in your own webpages, avoiding the need for a bookmark.

About

Shows the the current video time when an embedded video is playing

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published