Custom HTML5 Video Player With Lazy Load - RTOP

RTOP is a jQuery based HTML5 video player plugin with a focus on performance and customization. 

The plugin supports lazy load mode that the plugin will delay the loading of your video until the poster image is clicked/tapped.

More Features:

• Shows/hides player controls.
• Custom control icons.
• Plays the video in a modal.
• Custom poster image.
• Autoplay on page load.
• Auto replay the video.

How to use it:

1. Link to the required jQuery library and RTOP Video Player's file.

<link rel="stylesheet" href="dist/css/rtop.videoPlayer.VERSION.min.css" />
<script src="https://code.jquery.com/jquery-VERSION.slim.min.js"></script>
<script type="text/javascript" src="/dist/js/rtop.videoPlayer.ERSION.min.js"></script>

2. Load the Font Awesome for the custom icons (OPTIONAL but highly recommended).

<link rel="stylesheet" href="https://use.fontawesome.com/releases/VERSION/css/all.css">

3. Embed an HTML5 video into the document.

<div id="example">
  <video src="sample.mp4" type="video/mp4" poster="sample.jpg" playsinline>
    <source src="sample.mp4" type="video/mp4">
  </video>    
</div>

4. To enable the lazy load functionality, embed the HTML5 video using the following data attributes:

<div id="example" 
     data-video="sample.mp4" 
     data-type="video/mp4" 
     data-poster="sample.jpg"
>

5. Initialize the RTOP Video Player by calling the function on the top container.

var myPlayer = $('#example').RTOP_VideoPlayer();

6. Enable/disable player controls.

var myPlayer = $('#example').RTOP_VideoPlayer({
    showControls: true,
    showControlsOnHover: true,
    controlsHoverSensitivity: 3000,
    showScrubber: true,
    showTimer: false,
    showPlayPauseBtn: true,
    showSoundControl: false,
    showFullScreen: false,
    keyboardControls: true,
});

7. Determine whether to use Font Awesome icons. Default: true.

var myPlayer = $('#example').RTOP_VideoPlayer({
    fontAwesomeControlIcons: true
});

8. Display and play the video in a modal popup. Default: false.

var myPlayer = $('#example').RTOP_VideoPlayer({
    playInModal: true,
    showCloseBtn: true,
    closeModalOnFinish: true
});

9. Display and play the video in a modal popup. Default: false.

var myPlayer = $('#example').RTOP_VideoPlayer({
    playInModal: true,
    showCloseBtn: true,
    closeModalOnFinish: true
});

10. Enabled/disable autoplay. Default: false.

var myPlayer = $('#example').RTOP_VideoPlayer({
    autoPlay: true,
    allowPlayPause: true
});

11. Enabled/disable autoplay. Default: false.

var myPlayer = $('#example').RTOP_VideoPlayer({
    autoPlay: true,
    allowPlayPause: true
});

12. More configuration options with default values.

var myPlayer = $('#example').RTOP_VideoPlayer({
    themeClass: 'rtopTheme',
    loop: false,
    allowReplay: true,
    gtmTagging: false, // sends GTM tags
    gtmOptions: {}
});

13. API methods.

// pause the video
myPlayer.pause();

// play the video
myPlayer.play();

// close the video modal
myPlayer.close();

// seek to a point
myPlayer.goTo(20);

14. The plugin also supports Vimeo videos.

var myPlayer = $('#example').RTOP_VideoPlayer({
    vimeo_url: 'public Vimeo video here'
});

Changelog:

2019-07-13

• update FS controls for iOS

2019-07-02

• update FS controls for iOS

---

This awesome jQuery plugin is developed by redtettemer. For more Advanced Usages, please check the demo page or visit the official website.