RTOP is a web based, multi feature jQuery video player with thumbnails that play HTML5 videos on the webpage. The plugin offers to fully configure player including player’s interface, controls icons. It also allow you to track your videos by adding GTM . User can play, pause, forward and control volume through its interface.
Plugin Overview
| Plugin: | RTOP Video Player |
| Author: | RTO+P |
| Licence: | MIT Licence |
| Published: | January 17, 2024 |
| Repository: | Fork on GitHub |
| Dependencies: | jQuery 1.3.1 or Latest version and Font Awesome 5 |
| File Type: | zip archive (Images, Video, HTML, CSS & JavaScript ) |
| Package Size: | 23.4 MB |
How to Make jQuery Video Player with Thumbnails
1. To getting started with RTOP Video Player, load the jQuery JavaScript library and Font Awesome for player’s icons.
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- Fontawesome 5--> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
2. After that, include the RTOP video player‘s CSS and JavaScript file into your HTML document.
<!-- RTOP Video Player CSS --> <link rel="stylesheet" href="dist/css/rtop.videoPlayer.1.0.0.min.css" /> <!-- RTOP Video Player JS --> <script type="text/javascript" src="dist/js/rtop.videoPlayer.1.0.0.min.js"></script>
3. Now its time to create HTML5 video element for RTOP video player. There are two ways in which you can build HTML structure for video player, the first method uses HTML5 video tag and second is a lazy loading option by adding the video and poster source as data attributes into a div.
Use one of the following:
3.1 – Method 1
<!-- HTML5 VIDEO TAG --> <div id="my_video"> <video src="sample.mp4" type="video/mp4" poster="sample.jpg" playsinline> <source src="sample.mp4" type="video/mp4"> </video> </div>
3.2 – Method 2
<!-- LAZY LOAD (preferred way for quicker page load)--> <div id="my_video" data-video="sample.mp4" data-type="video/mp4" data-poster="sample.jpg"> </div>
4. Finally, initialize the plugin in jQuery document ready function with all default options.
$(document).ready(function(){
$("#my_video").RTOP_VideoPlayer();
});
Advance Configuration Options for RTOP Video Player
The following are some advance configuration options to create / customize “jQuery Video Player with Thumbnails”.
showControls |
Show the player controls, turn off if you want the player to play without user interface. Default: true, Type: Boolean.
$("#my_video").RTOP_VideoPlayer({
showControls: false,
});
|
showControlsOnHover |
Allow player’s controls to display on hover (mouse over). Default: true, Type: Boolean.
$("#my_video").RTOP_VideoPlayer({
showControlsOnHover: false,
});
|
showControlsOnHover |
Time interval in milliseconds after mouse move ends before the video controls hide. Default: 3000, Type: Number.
$("#my_video").RTOP_VideoPlayer({
showControlsOnHover: 5000,
});
|
showScrubber |
Show the scubber/progress bar for the video. Default: true, Type: Boolean.
$("#my_video").RTOP_VideoPlayer({
showScrubber: true,
});
|
showTimer |
Show the time elapsed and total time of video. Default: false, Type: Boolean.
$("#my_video").RTOP_VideoPlayer({
showTimer: true,
});
|
showPlayPauseBtn |
Show the play/pause button in the video player controls. Default: true, Type: Boolean.
$("#my_video").RTOP_VideoPlayer({
showPlayPauseBtn: true,
});
|
showSoundControl |
Show mute button and volume steps. Default: false, Type: Boolean.
$("#my_video").RTOP_VideoPlayer({
showSoundControl: true,
});
|
keyboardControls |
Allow space bar to play & pause video. Default: true, Type: Boolean.
$("#my_video").RTOP_VideoPlayer({
keyboardControls: true,
});
|
themeClass |
Class added to parent div to allow for easier custom skins. Default: ‘rtopTheme’, Type: String.
$("#my_video").RTOP_VideoPlayer({
themeClass: 'custom-class',
});
|
fontAwesomeControlIcons |
Use font awesome icons for all the control icons. If you want to use other font library turn this option to false. Default: true, Type: Boolean.
$("#my_video").RTOP_VideoPlayer({
fontAwesomeControlIcons: true,
});
|
autoPlay |
Auto play video on page load, but will mute video. Default: false, Type: Boolean.
$("#my_video").RTOP_VideoPlayer({
autoPlay: true,
});
|
allowPlayPause |
If a user can play/pause the video, used with the autoplay feature. Default: true, Type: Boolean.
$("#my_video").RTOP_VideoPlayer({
allowPlayPause: false,
});
|
loop |
Automatically replay video. Default: false, Type: Boolean.
$("#my_video").RTOP_VideoPlayer({
loop: false,
});
|
allowReplay |
Allow user to replay video once finished. Default: true, Type: Boolean.
$("#my_video").RTOP_VideoPlayer({
allowReplay: true,
});
|
Video Player in Modal
If you want to play your video in modal window, you can use the following configuration options related to modal.
playInModal |
Open video in a fixed position modal. Default: false, Type: Boolean.
$("#my_video").RTOP_VideoPlayer({
playInModal: true,
});
|
showCloseBtn |
Show a close button for the modal that will close the modal on user click. Default: false, Type: Boolean.
$("#my_video").RTOP_VideoPlayer({
showCloseBtn: false,
});
|
closeModalOnFinish |
Automatically close modal when video has finished. Default: false, Type: Boolean.
$("#my_video").RTOP_VideoPlayer({
closeModalOnFinish: false,
});
|
GTM Tagging for Video
GTM stands for Google Tags Manager that automatically tracks interactions of embedded HTML5 video player on your site. If you want to add GTM service in your video with RTOP Video Player, you can use the following set of configuration options.
gtmTagging |
Send GTM tags, GTM must be set up on the page to work. Default: false, Type: Boolean.
$("#my_video").RTOP_VideoPlayer({
gtmTagging: true,
});
|
gtmTagging{} |
An object to hold the information for the tag that should be sent during the video. Default: null, Type: Object.
$("#my_video").RTOP_VideoPlayer({
gtmTagging: {
time: '',
type: '',
name: '',
},
});
|
If you are new to GTM, read a complete step by step Google Tag Manager Video Tracking Guide .
Similar Code Snippets:
HTML Code For Discussion Forum
Icon Hover Effect Using CSS
Skeuomorphic Toggle Buttons Using CSS
Breaking News Ticker HTML Code with Demo
Show More / Show Less HTML Code
HTML Toggle Switch with Text - jQuery Sweet Checkbox
JavaScript Scientific Calculator
Simple Messaging Ui in HTML CSS with Example
Blog Comment Section Design
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.