Create Interacitve Chapters For Long HTML5 Videos - vidcha.js

Create Interacitve Chapters For Long HTML5 Videos - vidcha.js

jQuery PluginsjQuery Other PluginsjQuery vidcha.js

Create Interacitve 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.

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.

  • Publication date: 14.02.2019
  • Source