The Basics of TimeKitJS

Getting started with TimeKitJS is easy and requires almost no JavaScript experience. Its HTML data tag syntax makes syncing element style changes to a video as simple as writing inline CSS.

Library

To get started, register your page's domain, if you haven't done so already, and paste the embed code to your account's unique TimeKit library in the <head> section of your web page.

<head>
    <script type="text/javascript" src="//use.timekitjs.com/tk-abc123.js"></script>
</head>

Video

TimeKit is a JavaScript library for modern websites and synchronizes events with HTML5 video. Now a standard in all modern browsers, HTML5 video not only is an improvement on the quality of Flash-based video players, but its platform support extends from the desktop to mobile browsers. This means almost every modern browser on every platform will support your video and TimeKit events without a plugin or other workaround.

In addition to the native <video> element, TimeKit also supports APIs from third-party HTML5 player embeds like YouTube and Vimeo. Syncing with a video's timeline is as easy attaching a unique ID to a <video> element or <iframe>.

HTML5

The ID of a native HTML5 video element should be attributed to the <video> node.

<video id="my-video" src="foo.mp4" controls></video>

<video id="my-video" controls>
    <source src="foo.webm" type="video/webm">
    <source src="foo.ogg" type="video/ogg"> 
    <source src="foo.mov" type="video/quicktime">
</video>

YouTube

When TimeKit detects a YouTube embed, it automatically compiles the necessary YouTube API scripts. There is no need to include these manually in your page. Simply copy the embed code and paste into your web page with the addition of your unique ID and the parameter enablejsapi=1 in the URL. This is a requisite of YouTube to enable cross-domain communication with its API.

<iframe id="my-video" width="560" height="315" src="https://www.youtube.com/embed/yBzZ-SOEu7Y?enablejsapi=1" frameborder="0"></iframe>

Vimeo

When TimeKit detects a Vimeo embed, it automatically compiles the necessary Vimeo API scripts. There is no need to include these manually in your page. Simply copy the embed code and paste into your web page with the addition of your unique ID.

<iframe id="my-video" src="http://player.vimeo.com/video/118782710" width="100%" height="100%" frameborder="0"></iframe>

Data Attribute

Any DOM element within the body of your web page is now able to synchronize with your video simply by including at least one TimeKit data tag as an attribute of the element. This includes containers, headings, the video element, even the body node itself. The data tag may be written in any of the following formats:

`data-tk-[#]`	Time, in milliseconds, from the beginning of the video.
`data-tk-[#]s`	Time, in units, from the beginning of the video. h (hours), m (minutes), s (seconds), ms (milliseconds).
`data-tk-[#]s[#]ms`	Time, in mixed units, from the beginning of the video. h (hours), m (minutes), s (seconds), ms (milliseconds).

data-tk-[#]

Time, in milliseconds, from the beginning of the video.

data-tk-[#]s

Time, in units, from the beginning of the video.

h (hours), m (minutes), s (seconds), ms (milliseconds).

data-tk-[#]s[#]ms

Time, in mixed units, from the beginning of the video.

h (hours), m (minutes), s (seconds), ms (milliseconds).

Within the data tag, list the CSS properties the element should inherit at the time specified in the data tag. Write these just as you would inline CSS.

<div data-tk-0="top: 50px;"
     data-tk-2s="top: 200px;"
     data-tk-4s750ms="top: 300px;">
</div>

Only those elements with a TimeKit data attribute will synchronize. The others will remain static (or subject to other JavaScript manipulations). If a TimeKit data tag is declared for an element without an initial (0) state declared, the element's CSS properties set by the external stylesheet or inline style attribute will be used as the initial state.

TimeKit automatically looks for changes in numeric properties and will animate an element between states when it detects a change in numeric property values. When a new property or non-animatable property is declared, changes will be applied at the first keyframe after the data tag's timestamp.

<h1 data-tk-0="display: none;"
     data-tk-30s="display: block; left: 50%;"
     data-tk-37s="display: none; left: 100%;">
    Watch me move!
</h1>

For a more detailed discussion of animatable vs. solid state transitions, see the examples that follow this section.

Constructor

Finally, one last piece of JavaScript ties the video element to TimeKit and begins the synchronization process. Here, the ID (in this case "my-video") is passed. TimeKit is able to auto-detect the player type from the element's source. However, an optional second argument ('html', 'youtube', or 'vimeo') may also be passed to force a player type.

If you are not using other JavaScript to compile the page, place this at the bottom of the page.

<script type="text/javascript">try{new TimeKit('#my-video');}catch(e){}</script>
</body>
</html>

If you are using other JavaScript functions on the page or wish to place the script in the page's <head>, it should be called within JavaScript's onload, jQuery's ready, or similar function to ensure TimeKit is not initialized before the DOM elements have finished loading.

Next Display Text