jQuery Simple Video Player with Custom Range – RangePlayer.js

The Range Player is a simple video player plugin for jQuery to play HTML5 videos between selected range. The plugin can be used to play regular videos on website as it provide custom controls (i.e control buttons & volume). The range video player uses Font Awesome icons for video controls.

Further, video player can be fully customize with CSS, by default it is responsive. However, you can adjust its size.

Plugin Overview

Plugin: Range Player
Author: Abdur Rowf
Licence: MIT Licence
Published: January 19, 2024
Repository: Fork on GitHub
Dependencies: jQuery 1.12.4 or Latest version and Font Awesome 4
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 760 KB

How to Build jQuery Simple Video Player

1. First of all load the jQuery, jQuery UI and Font Awesome (for icons) into HTML document to getting started with range player.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<!-- Font Awesome 4-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

2. Also, include the rangePlayer‘s CSS and JavaScript files.

<!-- Range Player CSS -->
<link rel="stylesheet" href="css/rangePlayer.css">

<!-- Range Player Js -->
<script src="js/rangePlayer.js"></script>

3. After loading all assets, create HTML5 <video> tag with hiding default control and put your video source in it.

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

4. Finally, initialize the plugin with the unique id of video.

$(document).ready(function(){
   let video = RP("myVideo");
});

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...