jQuery Video Player Plugin

Change class name on click in jQuery

by Ben Clayton

HTML

<div class="video" data-video-conf='{"src":"https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_480_1_5MG.mp4", "autoplay":true, "loop":true }'>

</div>
<div class="video two" data-video-conf='{"src":"https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_480_1_5MG.mp4", "autoplay":false, "loop":true, "hoverpause": true }'>

</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.video video {
  width: 100%;
}

JavaScript

/*!
 * jQuery Video Player plugin
 */

// the semi-colon before the function invocation is a safety
// net against concatenated scripts and/or other plugins
// that are not closed properly.
;
(function($, window, document, undefined) {

  // undefined is used here as the undefined global
  // variable in ECMAScript 3 and is mutable (i.e. it can
  // be changed by someone else). undefined isn't really
  // being passed in so we can ensure that its value is
  // truly undefined. In ES5, undefined can no longer be
  // modified.

  // window and document are passed through as local
  // variables rather than as globals, because this (slightly)
  // quickens the resolution process and can be more
  // efficiently minified (especially when both are
  // regularly referenced in your plugin).

  // Create the defaults once
  var pluginName = "holo_jqvideoplayer",
    defaults = {
      src: "no-specified-video",
      autoplay: false,
      loop: false,
      hoverpause: false
    };

  // The actual plugin constructor
  function Plugin(el, options) {
    this.el = el;

    // jQuery has an extend method that merges the
    // contents of two or more objects, storing the
    // result in the first object. The first object
    // is generally empty because we don't want to alter
    // the default options for future instances of the plugin
    // data attribute config override options which override defaults.

    var data_attr_conf = $(el).data('video-conf');
    this.options = $.extend({}, defaults, options, data_attr_conf);

    this._defaults = defaults;
    this._name = pluginName;
    this._video = null;
    this._playing = 0;

    this.init();
  }

  Plugin.prototype = {

    init: function() {
      // Place initialization logic here
      // You already have access to the DOM element and
      // the options via the instance, e.g. this.element
      // and this.options
      // you can add more functions like the one below and
      // call them like so:...