Example Mobile Video Player

JWVideo.js

(function(window) {


  var WizardVideo = function(configuration) {
    var config = configuration || {};

    this.name = "WizardVideo";
    this.id = config.id || this.name;
    this.width = config.width || "280px";
    this.height = config.height || "180px";
    this.x = config.x || "20px";
    this.y = config.y || "200px";
    this.src = config.src || "";
    this.poster = config.poster || "";
  };


  var p = WizardVideo.prototype = new ConfigurableControl();

  p.setupPlayer = function() {

    if (!this.jwAPI) {
      var that = this;
      this.jwAPI = $.getScript("http://media.socialvi.be/js/video/jwplayer/jwplayer.js")
        .done(function(script, textStatus) {
            p.onPlayerReady(that);
        });
    }
  };

  p.onPlayerReady = function(obj) {

    jwplayer("player").setup({
        file: obj.src,
        image: obj.poster,
        height: obj.height,
        width: obj.width,
        modes: [{ type: "html5", src: "http://media.socialvi.be/js/video/jwplayer/jwplayer.html5.js" }],
        events: {
            onBeforePlay:function() {
              if (SV)
                SV.api.trackInteraction('multimedia', 'video_started', obj.src);
            },
            onComplete: function() {
              if (SV)
              {
                SV.api.trackInteraction('multimedia', 'video_completed', this.src);
                SV.engagement.showNextStep();
              }
            }
        }
    });
  };

  p.build = function() {
    this.div = $('<div id="' + this.id + '" class="manipulatable"/>');
    this.bb = $('<div class="bb"/>');
    this.mask = $('<div class="wizard-mask"/>');
    //this.embed = $('<iframe class="wizard-iframe resize"/>');
    //this.embed.attr('src', this.src);

    this.embed = $('<div id="player" class="wizard-iframe resize"/>');
    
    this.bb.append(this.mask, this.embed);
    this.div.append(this.bb);
  };


  p.renderTo = function(element) {
    this.build();

    element.prepend(this.div);

    this.setupPlayer();

    this.update();
  };


  p.update = function() {
    this.div.attr('id', this.id);
    this.div.width(this.width);
    this.div.height(this.height);
    this.div.css('left', this.x);
    this.div.css('top', this.y);

    if (jwplayer && this.src)
      jwplayer().load( [{image: this.poster, sources: [ { file: this.src } ]}] );
  };


  p.getConfig = function() {
    var config = {
      "id": this.id,
      "name": this.name,
      "width": this.width,
      "height": this.height,
      "x": this.x,
      "y": this.y,
      "src": this.src,
      "poster": this.poster
    };

    return config;
  };


  p.setConfig = function(config) {
    for (var i in config) {
      switch (i) {
        case 'id':
          this.id = config[i];
          break;
        case 'width':
          this.width = config[i];
          break;
        case 'height':
          this.height = config[i];
          break;
        case 'x':
          this.x = config[i];
          break;
        case 'y':
          this.y = config[i];
          break;
        case 'src':
          this.src = config[i];
          break;
        case 'poster':
          this.poster = config[i];
          break;
      }
    }
  };


  window.WizardVideo = WizardVideo;


}(window));