Videojs Live Clock Plugin

24 Hours Seconds

A LiveClock plugin for the live stream allows to display current time in the control bar, right after LIVE label. Optionally, this is possible to display current time in one of the top corners of the player instead of the control bar.
By default, the current time is displayed in 12 hour format "hh:mm". Optionally, you can display current time in 24 hour format. You can also order to display the current time with seconds "hh:mm:ss".
Default current time is a user's local time. Optionally, you can request to display the time in different time zones. The last option available to set is language-sensitive representation of the current time. You can test more options below.

Below you can see the list of all options available to set for live clock plugin.

position - possible values: "controlbar" or "overlay" (default: "controlbar")
direction - allows to set alignment for overlay clock. Possible value: "left" or "right" (default: "left").
offsetV - allows to set vertical offset fot overlay clock in pixels. Default value:15
offsetH - allows to set horizonta offset fot overlay clock in pixels. Default value: 15
fontSize - allows to set font size for overlay clock. Default value: 16.
hours - allows to set 12 or 24 hoyrs clock. Default value: 12.
seconds - allows to display click time with seconds. Default value: false.
timeZone - allows to set time zone, e.g. "America/New_York".
locale - allows to set local language, e.g. "ja-JP".

Example Plugin setup

You need to load javascript plugin file and initialize the plugin, right after the player is initialized.

Code snippet


<script src="//domain.com/videojs/videojs.min.js"></script>
<script src="//domain.com/videojs/nuevo.min.js"></script>
<script src="//domain.com/videojs/plugins/liveclock.min.js"></script>

<script>
   var player = videojs('my_player_id");
   player.nuevo();
   player.liveclock({seconds:true,timeZone:"America/NewYork"});
</script>

The list of timezonez published by freely distributable Moment.js library you can get here in .txt format.
The list of all known locales in ISO639-1 language code can be found here.

Some of liveclock options can be altered programmatically via public functions. You can change time zone, locale, 12/24 hour format and seconds display on the fly. Check functions below.

Code snippet

player.timeZone("Australia/Sydney");  
player.clockHours(24);  // change hour format
player.clockSeconds(true) //seconds switch on
player.clockLocale("ja-JP");