RTO+P Documentation

RTO+P Video Player

jQuery Plugin to play HTML5 video across all browsers

Getting Started

Include CSS

Include either the compiled CSS file in the `dist/css` folder or the uncompiled SCSS file in the `src` folder. Font Awesome 5 is optional but highly recommended!

<link rel="stylesheet" href="dist/css/rtop.videoPlayer.1.0.1.min.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"crossorigin="anonymous"/>
								

Include JS

Include either the minified file in the `dist/js` folder or the expanded file in the `src` folder. jQuery is required! But any version of jQuery will work

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="dist/js/rtop.videoPlayer.1.0.1.min.js"></script>
								

Set HTML

You can either use an HTML5 video tag or the preferred option is lazy loading option by adding the video and poster source as data attributes. By lazy loading, you increase page load speed and dont load a video file until its needed.

<!-- 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>

<!-- 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>

Call the plugin

$(document).ready(function(){
  $("#my_video").RTOP_VideoPlayer();
});

Options

showControls

Type: Boolean

Default: true

Show the player controls, turn off if you want the player to play without user interaction.

showControlsOnHover

Type: Boolean

Default: true

Allow controls to display on hover

showControlsOnHover

Type: Number

Default: 3000

Milliseconds after mouse move ends before the video controls hide

showScrubber

Type: Boolean

Default: true

Show the scubber/progress bar for the video

showTimer

Type: Boolean

Default: false

Show the time elapsed and total time of video

showPlayPauseBtn

Type: Boolean

Default: true

Show the play/pause button in the controls

showSoundControl

Type: Boolean

Default: false

Show mute button and volume steps

showFullScreen

Type: Boolean

Default: false

Show fullscreen button

keyboardControls

Type: Boolean

Default: true

Allow space bar to play/pause video

themeClass

Type: String

Default: 'rtopTheme'

Class added to parent div to allow for easier custom skins

fontAwesomeControlIcons

Type: Boolean

Default: true

Use font awesome icons for all the control icons, this is optional, but highlight recommended. You need to also include the Font Awesome 5 CSS. If this is disabled, you will need to add your icons into the CSS as background images.

autoPlay

Type: Boolean

Default: false

Auto play video, but will mute video

allowPlayPause

Type: Boolean

Default: true

If a user can play/pause the video, used with the autoplay feature

loop

Type: Boolean

Default: false

Automatically replay video

allowReplay

Type: Boolean

Default: true

Allow user to replay video once finished

playInModal

Type: Boolean

Default: false

Open video in a fixed position modal

showCloseBtn

Type: Boolean

Default: false

Show a close button for the modal that will close the modal on user click

closeModalOnFinish

Type: Boolean

Default: false

Automatically close modal when video has finished

gtmTagging

Type: Boolean

Default: false

Send GTM tags, GTM must be set up on the page to work

gtmTagging

Type: Object

Default: {}

An object to hold the information for the tag that should be sent during the video. Each tag should be its own object with the keys: time, name,type

vimeo_url

Type: String

Default: null

Embed a public Vimeo video (must be public!) with all the same displays and controls

Events

Events are provided by the video player in most locations. This gives you the ability to listen for any changes and perform your own actions.

var vid = $('#my_video');
vid.RTOP_VideoPlayer();
// Listen to video events:
vid.on('play.vid.rtop_videoplayer', function(event) {
    ...
})

You could also trigger events by yourself to control the video player

var vid = $('#my_video').RTOP_VideoPlayer();

// play video
vid.RTOP_VideoPlayer('pause');

// go to time (in sec)
vid.RTOP_VideoPlayer('goTo', 10);

// pause video
vid.RTOP_VideoPlayer('pause');

// close modal
vid.RTOP_VideoPlayer('close');