Play Only A Specific Part Of An HTML5 Video - jQuery rangePlayer

rangePlayer is a small jQuery plugin which enables your visitor to play only a specific part of an HTML5 video embedded in your page.

The plugin makes use of jQuery and jQuery UI to generate a range slider where your visitor can select start/end times to make the HTML5 video player start and stop at a specific time.

How to use it:

1. Load the necessary jQuery and jQuery UI JavaScript libraries in the html page.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/flick/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

2. Load the latest Font Awesome Iconic Font for the player controls.

<link rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
      integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
      crossorigin="anonymous"
/>

3. Download and load the jQuery rangePlayer plugin's files.

<script src="./rangePlayer.js"></script>
<link rel="stylesheet" href="./rangePlayer.css" />

4. Embed an HTML5 video into the page.

<video id="tbk" controls style="display:none;">
  <source src="1.mp4" type="video/mp4" />
  <source src="1.mp4" type="video/ogg" />
  Your browser does not support HTML5 video.
</video>

5. Initialize the plugin on the HTML5 video. That's it.

let video = RP("tbk")

---

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