jQuery Plugin – make jwplayer resumable for next visit and improve conversion

In my previous post I wrote jQuery plugin that resume flowplayer from the last played position. In this post I’ll make jwplayer resumable.

Resumable jwplayer

Meaning is neat – when you host long video presentation for your sales information and then slowly show add to cart button and other offers and timer stuff it might possible, your user might get distracted and leave site. But when they come again they again have to see whole presentation from beginning and wait for 20-30 mins for add to cart pops up or exit-splash bother them.

Lets start with minimal setup.

Hide Promotional Content within Div

.hide{display:none;}

<div class="hide" align="center">
 <h1>This is hidden content</h1>
 <p>This div visible after 10 seconds</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis minima laboriosam doloribus dolorem delectus ab eveniet explicabo suscipit reiciendis dignissimos harum minus culpa ut repudiandae accusamus alias officiis repellat fugit.</p>
 </div>

 Now add necessary scripts:-

<script type="text/javascript" src="jwplayer.js"></script>
<script type="text/javascript" src="jwplayer.html5.js"></script>
<script type="text/javascript" src="totalStorage.js"></script>
<script type="text/javascript" src="jwplayer-resumable.js"></script>

jQuery Plugin Code:-

var jwPlayerResumable = (function ($, jwp) {
    'use strict';

    var jwPlayerResumable = {
        _video_id: "mediaplayer",
        _show_div_after_secs: 10,
        _skip_beforeseek_event: false,
        _div_to_show: ".hide",
        _fp: function () {
            return jwplayer();
        },
        getCurrentPos: function () {
            return jwplayer().getPosition();
        },
        setCurrentPos: function (seconds) {
            this._skip_beforeseek_event = true;

            if (typeof (jwplayer().getDuration()) == "undefined") {
                setTimeout(function () {
                    jwPlayerResumable.setCurrentPos(jwPlayerResumable.getTimePosition());
                }, 1000);
                return;
            }

            if (jwplayer().getDuration() == -1 || jwplayer().getDuration() > Number(seconds + 5)) {
                jwplayer().seek(jwPlayerResumable.getTimePosition());
            }
            this._skip_beforeseek_event = false;
        },
        setTimePosition: function (time) {
            $.totalStorage(this._video_id, time);
        },
        getTimePosition: function () {
            return $.totalStorage(this._video_id);
        },
        resumePlayBack: function (more_settings) {
            var time = this.getTimePosition();
            this.setCurrentPos(time);

            // showing div

            var div_time = more_settings.aftertime || this._show_div_after_secs;

            if (time > div_time) {
                $(more_settings.divtoshow).each(function (k, v) {
                    $(this).css("display", "block");
                });

            }

            return this;
        },
        init: function (id) {
            if (typeof (id) != "undefined") {
                this._video_id = String(id);
            }

            jwplayer().onTime(function (e) {
                jwPlayerResumable.setTimePosition(e.position);
            });

            return this;
        }
    }

    return jwPlayerResumable;

}(jQuery, jwplayer));

Plugin initialization:-

 jwPlayerResumable.init("video-identifier").resumePlayBack({
     aftertime: 10,
     divtoshow: ['.hide']
 });

 Plugin code Explanation:-

• Once you call init() function with local storage identifier It’ll listen to jwplayer playback and log current playback time as video-identifier value.
• then resumePlayBack() function will take two arguments
  [1] timeout for hidden content to show.
  [2] target hidden div to show.
• Once this function is initialize it continuously check for the condition
  if(current_time > aftertime) => it’ll show hidden content

Code that retains hidden div visible if user already watched configured seconds.

  jQuery(document).ready(function () {

      jwplayer("video").setup({
          flashplayer: "jwplayer.flash.swf",
          file: "http://stream.flowplayer.org/bauhaus/624x260.mp4",
          'autostart': 'true',
          height: "338",
          width: "600",
          controls: false,
          controlbar: false,
          displayclick: 'play',
          icons: false
      }).onReady(function () {
          jQuery('#video').css("margin", "0 auto").css("position", "static");
          jwPlayerResumable.init("video-identifier").resumePlayBack({
              aftertime: 10,
              divtoshow: ['.hide']
          });
      }).onTime(function (event) {
          if (event.position > 10) {
              $('.hide').show();
          }
      });
  });

Now look at above code, jwplayer API provides onReady() event callback it fires when player is ready for playback. So, we called our resumable jwplayer on its ready event. while onTime() callback will fire on every second of playback so here we check if playback position already passed 10 seconds then show hidden content.