如何在网络视频上制作热点

Question

我看到关于视频的热点问题已经存在.我不能通过这个答案来解决我的问题.我想在不同的时间框架上显示视频的一些工具提示.喜欢这个图片:

Answer 1

您可以使用HTML5视频控件和JavaScript来完成.您必须timeupdate使用JavaScript 在活动中抓住时间框架,然后您需要在该时间显示工具提示.

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);
}

最近我制作了一个视频热点你可以检查一下.热点视频.我希望它可以帮到你.