How to make hotspots on video for web

Question

I see there is already a question abour Hotspot on video. I can't solve my problem by this answer. I want to show some tooltip on video at different time frame. Like this image :

Answer 1

You can do it using HTML5 video control and JavaScript. You have to grab your time frame at the timeupdate event using JavaScript, then you need to show your tooltip on that time.

HTML :

<div id="video_box">
    <div id="caption"></div>
    <div id="hotspot"></div>
    <div>
        <video id='sampleVideo' controls>
            <source id='mp4' src="your-video.mp4" type='video/mp4'>
            <p>HTML5 Video is not supported by this browser.</p>
        </video>
    </div>
</div>

<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>

<script type="text/javascript">
    (function($){
        $(window).bind('load', init);
    })($);
</script>

JavaScript(scripts.js) :

// Currently shown hotspot.
    var idxHotspot = -1;

// Set up our hotspots.
var arrHotspots = [
    {"startTime":1,"endTime":20,"top":100,"left":100,"text":"I will be visible during 1 to 20 second"},
    {"startTime":21,"endTime":40,"top":150,"left":200,"text":"I will be visible during 21 to 40 second"},
    {"startTime":41,"endTime":60,"top":200,"left":300,"text":"I will be visible during 41 to 60 second"}
];

function init() {

    var video = $('#sampleVideo')[0];
    var $hotspot = $('#hotspot');
    var $caption = $('#caption');

    // Add the mouse events for the hotspot
    $hotspot.bind('mouseover', function(event) {
        video.pause();
    });

    $hotspot.bind('mouseout', function() {
        video.play();
    });

    // Determine when to show a hotspot.
    video.addEventListener('timeupdate', function() {

        // Grab the current video pointer time mark.
        var vidCurrentTime = video.currentTime;

        // Set flag if we need to show a new hotspot.
        var idxNewHotspot = -1;

        // Find if need to show a hostpot. Assumes only one hotspot at a time.
        for (var i=0; i<arrHotspots.length; i++) {
            if (vidCurrentTime >= arrHotspots[i].startTime && vidCurrentTime < arrHotspots[i].endTime) {
                idxNewHotspot = i;
            }
        }

        // Set up hotspot or remove a currently displayed one.
        if (idxNewHotspot > -1) {
            if (idxNewHotspot != idxHotspot) {

                // Position and size hotspot.
                $hotspot.css({
                    left : arrHotspots[idxNewHotspot].left+'px',
                    top : arrHotspots[idxNewHotspot].top+'px'
                }).show();

                // Position and size Caption.
                $caption.html(arrHotspots[idxNewHotspot].text);
                $caption.css({
                    left: (arrHotspots[idxNewHotspot].left + 20) + "px",
                    top: (arrHotspots[idxNewHotspot].top - 75) + "px"
                }).show();

                // Set the current hotspot shown.
                idxHotspot = idxNewHotspot;
            }
        } else {
            // Hide the current hotspot
            $hotspot.hide();
            $caption.hide();
        }
    }, false);
}

Recently i made a video hotspot you can check it. Hotspot Video. I hope it can help you.