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');