Display Text in TimeKitJS

Using TimeKit to add text outside your video has a number of advantages. First, it enables search engines to index that text and improve your page's SEO. Second, it improves text rendering. You no longer need to worry about poor video quality or buffering distorting your messages. With the browser's pixel-perfect font rendering, your viewers will also be able to click, copy and tigger other JavaScript just like with any other text element. Third, you will be able to edit and update that text independent of the video. Use your technology or another API to display today's date, time, the current weather. The possibilities are countless.

This example toggles the display property of the TimeKit-enabled text, a foundation for many transition effects. For non-animatable properties, TimeKit will simply update an element's CSS value at the declared time. In this case, the stylesheet has given each text element an initial value of display: none;. Like with any other JavaScript style changes, this will remain the element's style until an event is triggered to write an inline style. Effectively, the stylesheet's values can be thought of as an element's style at 0 seconds until which time a change is declared.

In this instance, the first change is data-tk-2s="display:block;". As you would expect, this element remains hidden until the 2 second mark, when it becomes visible until it is set back to display: none; at 7 seconds. If needed, you could continue to write this toggles as many times as needed to make an element appear and disappear throughout the length of your video.

For this example's purpose, each fact only needs to be shown once, and then a hyperlink is displayed as the video ends. Notice that this element has been only been given a display: none; at 0 seconds. This means that the element will disappear only if the video is replayed. Otherwise, the hyperlink will remain visible even after the video has ended.

You do not need to declare data-tk-0s="display: none;" in any of the other elements because this value will either have been established by the stylesheet or remain from the previous play's display: none; assignment.

var tk = new TimeKit('#video');

<div class="tk-canvas">
    <video id="video" controls>
        <source src="goldfish.mp4" type="video/mp4">
        <source src="goldfish.webm" type="video/webm">
        Sorry, your browser doesn't support HTML5 video.
    </video>
    <h3 class="goldfish" 
        data-tk-2s="display:block;" 
        data-tk-7s="display:none;"
    >
        Goldfish do not have eyelids, <br /> meaning they sleep with their eyes open.
    </h3>
    <h3 lass="goldfish" 
        data-tk-9s="display:block;" 
        data-tk-15s="display:none;"
    >
        Goldfish also lack stomachs. Instead, their intestines break down food and absorb nutrients.
    </h3>
    <a class="learnmore" href="http://channel.nationalgeographic.com/wild/fish-bowl/articles/fun-fish-facts/" target="_blank"
         data-tk-0s="display:none;"
         data-tk-16s="display:block;"
    >
        Learn more!
    </a>

.tk-canvas {
    position: relative;
}
.goldfish {
    bottom: 100px;
    display: none;
    left: 50px;
    position: absolute;
    text-align: center;
    width: 600px;
    z-index: 2;        
}
.learnmore {
    display: none;
    position: absolute;
    right: 50px;
    top: 25px;
}