Video Pointer

A jQuery plugin to create pointers to specific locations in a video from target points

Demo

HTML
<section class="video-pointer" id="vp1">
    <video preload="auto" autoplay="0" loop="0" class="pointer-video" muted>
        <source src="big_buck_bunny_240p_1mb.mp4" type="video/mp4">
    </video>
    <section class="pointer-items">
        <button class="pointer-item">
            <div class="pointer-item-title">
                <div class="pointer-anchor"><i class="fa fa-plus-square"></i></div>
                <h3>Blue Sky</h3>
            </div>
            <ul class="pointer-item-details">
                <li>Very Blue</li>
                <li>Very Sky</li>
            </ul>
        </button>
        <button class="pointer-item">
            <div class="pointer-item-title">
                <div class="pointer-anchor"><i class="fa fa-plus-square"></i></div>
                <h3>Shrubbery</h3>
            </div>
            <ul class="pointer-item-details">
                <li>Green</li>
                <li>Leafy</li>
            </ul>
        </button>
    </section>
</section>
JavaScript
$("#vp1").videopointer({
    points:[
        {
            x:47,
            y:63,
            color:"#9BC9BD",
            time:12
        },
        {
            x:50,
            y:35,
            color:"#A2B5C4",
            time:1
        }
    ]
});

Functions

Events