A jQuery plugin to create pointers to specific locations in a video from target points
<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>
$("#vp1").videopointer({ points:[ { x:47, y:63, color:"#9BC9BD", time:12 }, { x:50, y:35, color:"#A2B5C4", time:1 } ] });