jQuery Plugin To Create Pointers In A Video - Video Pointer

Video Pointer is a jQuery plugin to create pointers to specific locations and times in a video from target points.

How to use it:

1. Include the latest version of jQuery library and the Video Pointer plugin's script at the bottom of the page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="video-pointer.js"></script>

2. Embed an Html5 video into the webpage and add your custom descriptions for the video pointers.

<section class="video-pointer" id="vp1">
  <video preload="auto" autoplay loop 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">
              <img src="point-1.png" class="pointer-expander">
              <h3>Primary Connectivity</h3>
              <img src="point-2.png">
          </div>
          <ul class="pointer-item-details">
              <li>Time to connect</li>
              <li>Turnkey connection</li>
          </ul>
      </button>
      <button class="pointer-item">
          <div class="pointer-item-title">
              <img src="point-1.png" class="pointer-expander">
              <h3>Business Continuity</h3>
              <img src="point-2.png">
          </div>
          <ul class="pointer-item-details">
              <li>Downtime</li>
              <li>Maintaining operations</li>
          </ul>
      </button>
  </section>
</section>

3. The JavaScript to create points in the video.

$("#vp1").videopointer({
  points:[
      {
          x:47,
          y:63,
          color:"#9BC9BD",
          time:12
      },
      {
          x:50,
          y:35,
          color:"#A2B5C4",
          time:1
      }
  ]
}); 

4. Plugin's default options which can be overridden in the properties passed into the plugin.

$("#vp1").videopointer({
  initialized: false,
  angle: 45,
  endPointRadius: 4,
  endPointStroke: 2,
  lineColor: "#fff",
  videoSelector: "video",
  itemSelector: ".pointer-item",
  expanderSelector: ".pointer-expander"
}); 

5. API.

• rerender
• clearImages
• generatePoints
• getOptions
• getDefaults
• destroy

Change log:

2016-06-08

• Fixed offset issues

2016-06-07

• Use offset instead of position for image calculations
• Modified positioning

2016-05-26

• Line calculation adjustments

2016-05-25

• Translated the canvas to fix 1px lines

2016-05-24

• added video event listener

---

This awesome jQuery plugin is developed by fissionman924. For more Advanced Usages, please check the demo page or visit the official website.