Clickable Hotspots in TimeKitJS

One of the most powerful uses for TimeKitJS is the ability to embed hidden content that can be revealed when a user clicks or hovers on a particular subject in a video. Often these subjects we want to show additional information on will move as the video plays, which means our interactive areas, or "hotspots," must move with them. This tutorial will show you how to make a clickable hotspot that moves in sync with a video.

To achieve this effect, first create an element the size and shape of the area you want to be clickable and stylize it with standard CSS as desired (you can even make them invisible!). Make sure to set your attributes position:absolute; and top and left to the position you want your hotspot to be in at the start of the video.

Next, determine between which points in time in the video you want your hotspot to be moving. For example, if you want your hot spot to start moving from left:50px; top:50px; at 2 seconds into the video, and end up at left: 100px; top: 100px; at 4 seconds into the video, simply add the data attributes data-tk-2s="left:50px;top:50px;" data-tk-4s="left:100px;top:100px;" to your hotspot's HTML element. This will tell TimeKitJS to start moving your hotspot at the first timestamp and transition smoothly on a straight vector until it reaches its new destination at exactly the time specified in the second timestamp. Add as many timestamps and positions as you like to create complex paths for your clickable hotspot to follow.

var tk = new TimeKit('#video');
var el = document.getElementById("hotspot");
el.addEventListener("click", function(){
    alert("Blub Blub");
});

<div class="tk-canvas">
    <video id="video" controls loop>
        <source src="goldfish.mp4" type="video/mp4">
        <source src="goldfish.webm" type="video/webm">
        Sorry, your browser doesn't support HTML5 video.
    </video>
    <div id="hotspot"
         data-tk-0s400ms="left:700px;top:125px;"
         data-tk-2s500ms="left:600px;top:178px;"
         data-tk-4s900ms="left:175px;top:107px;"
         data-tk-6s500ms="left:-30px;top:62px;"
         data-tk-8s500ms="left:-30px;top:172px;"
         data-tk-10s700ms="left:374px;top:85px;"
         data-tk-11s300ms="left:480px;top:84px;"
         data-tk-11s900ms="left:543px;top:138px;"
         data-tk-12s600ms="left:547px;top:228px;"
         data-tk-13s200ms="left:510px;top:252px;"
         data-tk-15s100ms="left:217px;top:83px;"
         data-tk-16s300ms="left:54px;top:12px;"
         data-tk-18s800ms="left:-30px;top:-10px;"></div>
</div>

.tk-canvas {
    overflow: hidden;
    position: relative;
}
#hotspot {
    background: #fff;
    border: 10px solid red;
    border-radius: 100%;
    box-shadow: 0px 3px 3px rgba(0,0,0,0.25);
    cursor: pointer;
    height: 10px;
    left: 710px;
    opacity: 0.75;
    position: absolute;
    top: 125px;
    width: 10px;
    z-index: 2;
}