Create Interactive Chapters For Long HTML5 Videos - vidcha.js

The vidcha.js jQuery plugin makes it easier to create an interactive chapter menu for long HTML5 videos so that the users are able to navigate to the desired point in the video.

How to use it:

1. Embed an HTML5 video into the page.

<video class="vidchaVideo" poster="explore.jpg" controls>
  <source src="explore.mp4" type="video/mp4">
</video>

2. Download and place the JavaScript file vidcha.js after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"  
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/vidcha.js"></script>

3. Create the chapter menu and set the start time in seconds as follows:

<ul class="vidchaNav">
  <li data-start="0">1. Intro</li>
  <li data-start="6.6">2. Explore</li>
  <li data-start="24.7">3. Harvest</li>
  <li data-start="42.3">4. Ending</li>
</ul>

---

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