Skip to content

Instantly share code, notes, and snippets.

@stephanie-gredell
Created March 20, 2015 08:45
Show Gist options
  • Save stephanie-gredell/f8fb80e06eddd44b1911 to your computer and use it in GitHub Desktop.
Save stephanie-gredell/f8fb80e06eddd44b1911 to your computer and use it in GitHub Desktop.
Vimeo API and Backbone View
var Backbone = require('backbone');
var template = require('templates/video');
var $ = require('jquery');
module.exports = Backbone.View.extend({
videoUrl: '//player.vimeo.com/video/119777338',
events: {'click button': 'playButtonPressed'},
render: function () {
$(this.el).html(template({url: this.videoUrl}));
$('body').append(this.el);
this.$player = $('iframe');
this.url = window.location.protocol + this.$player.attr('src').split('?')[0];
this.$status = $('.status');
this.listenMessages();
},
listenMessages: function () {
if (window.addEventListener) {
window.addEventListener('message', _.bind(this.onMessageRecieved, this), false);
}
},
onMessageRecieved: function (e) {
var data = JSON.parse(e.data);
switch (data.event) {
case 'ready':
this.onReady();
break;
case 'playProgress':
this.onProgress(data.data);
break;
case 'pause':
this.onPause();
break;
case 'finish':
this.onFinish();
break;
}
},
_onReady: function () {
this.$status.text('ready');
this.post('addEventListener', 'pause');
this.post('addEventListener', 'finish');
this.post('addEventListener', 'playProgress');
},
_onProgress: function (data) {
this.$status.text(data.seconds + 's played');
},
_onPause: function () {
this.$status.text('paused');
},
_onFinish: function () {
this.$status.text('ready');
},
_playButtonPressed: function (e) {
this.$status.html('play');
},
_post: function (action, value) {
var data = {method: action};
if (value) {
data.value = value;
}
var message = JSON.stringify(data);
this.$player[0].contentWindow.postMessage(message, this.url);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment