VHX Video Embed

kickstarter-vhx-embed.html

<iframe src="https://embed.vhx.tv/videos/7702" width="850" height="480" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

<script>

var postMessage = {},
    PLAYER_EMBED_PROTOCOL = 'https://',
    PLAYER_EMBED_HOST = 'embed.vhx.tv';

/* post message listener
...................................*/
postMessage.setListener = function() {
  var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent",
      eventer = window[eventMethod],
      messageEvent = (eventMethod === "attachEvent") ? "onmessage" : "message";

  eventer(messageEvent, postMessage.handler, false);
};

/* send post message
...................................*/
postMessage.sendMsg = function(method, params) {
  var msg = {},
      frame = $('iframe[src*="' + PLAYER_EMBED_HOST + '"]');

  if (typeof(params) === 'undefined') {
   params = null;
  }

  msg = JSON.stringify({
    method: method,
    params: params
  });

  if (frame.length) {
    frame[0].contentWindow.postMessage(msg, PLAYER_EMBED_PROTOCOL + PLAYER_EMBED_HOST);
  }
}

/* post message handler
...................................*/
postMessage.handler = function(e) {
  var data,
      frame = $('iframe[src*="' + PLAYER_EMBED_HOST + '"]');

  if (e.origin === PLAYER_EMBED_PROTOCOL + PLAYER_EMBED_HOST) {

    data = JSON.parse(e.data);

    switch(data.event_type) {
      case 'start': // Triggers when the video starts. (Only called once)
      	break;

      case 'play': // When user resumes video playback
      	break;

      case 'pause':  // When user pauses video playback
      	break;

      case 'finish': // When video reaches the end
        break;

      case 'fullscreen': //  When user goes fullscreen
        break;
    }
  }
};

/* player embed methods
...................................*/
playerEmbed = {

  play: function() {
    postMessage.sendMsg('play');
  },

  pause: function() {
    postMessage.sendMsg('pause');
  },

  seekTo: function(time) {
    if (typeof(time) === 'undefined') {
      time = null;
    }
    postMessage.sendMsg('seekTo', time);
  }
};

$(function() {
  postMessage.setListener();


/* player api
...................................*/
// playerEmbed.play()
// playerEmbed.pause()
// playerEmbed.seekTo()
});

</script>