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

File Size: 4.24 KB
Views Total: 2439
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="">
<script src=""></script>
<script src=""></script>

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

<link rel="stylesheet"

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.

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.