jQuery Video Player with Thumbnails – RTOP Video Player

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: May 12, 2019
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 .