jquery.vimeo.api.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. /**!
  2. * Simple jQuery Vimeo API -- By Jeremy Rue
  3. *
  4. * Description: A jQuery plugin to easily control Vimeo videos through their API.
  5. * Author: Jeremy Rue, jrue@berkeley.edu
  6. * License: MIT
  7. * Version: 0.9.3
  8. */
  9. ;(function($, window) {
  10. var vimeoJqueryAPI = {
  11. //catches return messages when methods like getVolume are called.
  12. //counter is if multiple calls are made before one returns.
  13. catchMethods : {methodreturn:[], count:0},
  14. //This kicks things off on window message event
  15. init : function(d){
  16. var vimeoVideo,
  17. vimeoAPIurl,
  18. data;
  19. //is this window message from vimeo?
  20. if(!d.originalEvent.origin.match(/vimeo/g))
  21. return;
  22. //make sure data was sent
  23. if(!("data" in d.originalEvent))
  24. return;
  25. //store data as JSON object
  26. data = $.type(d.originalEvent.data) === "string" ? $.parseJSON(d.originalEvent.data) : d.originalEvent.data;
  27. //make sure data is not blank
  28. if(!data)
  29. return;
  30. //get the id of this vimeo video, hopefully they set it. If not, use first one we find
  31. vimeoVideo = this.setPlayerID(data);
  32. vimeoAPIurl = this.setVimeoAPIurl(vimeoVideo);
  33. //If this is an event message, like ready or paused
  34. if(data.hasOwnProperty("event"))
  35. this.handleEvent(data, vimeoVideo, vimeoAPIurl);
  36. //IF this is a return event message, like getVolume or getCurrentTime
  37. if(data.hasOwnProperty("method"))
  38. this.handleMethod(data, vimeoVideo, vimeoAPIurl);
  39. },
  40. setPlayerID : function(d){
  41. //if they set an player_id as a query string in the URL
  42. if(d.hasOwnProperty("player_id")){
  43. if($("#" + d.player_id).length){
  44. return $("#" + d.player_id);
  45. } else {
  46. return $("iframe[src*=" + d.player_id + "]");
  47. }
  48. } else {
  49. //No player_id. Use the first Vimeo video on the page, and hope they don't have multiples
  50. return $("iframe[src*='vimeo']").eq(0);
  51. }
  52. },
  53. setVimeoAPIurl : function(d){
  54. //prepend vimeo url with proper protocol
  55. if(d.attr('src').substr(0, 4) !== 'http'){
  56. return window.location.protocol !== 'https:' ? 'http:'+d.attr('src').split('?')[0] : 'https:'+d.attr('src').split('?')[0];
  57. } else {
  58. return d.attr('src').split('?')[0];
  59. }
  60. },
  61. handleMethod : function(d, vid, api){
  62. //If the message is returned from a method call, store it for later.
  63. this.catchMethods.methodreturn.push(d.value);
  64. },
  65. handleEvent : function(d, vid, api){
  66. switch (d.event.toLowerCase()) {
  67. case 'ready':
  68. //Go through all events attached to this element, and set an event listener
  69. for(var prop in $._data(vid[0], "events")){
  70. if(prop.match(/loadProgress|playProgress|play|pause|finish|seek|cuechange/)){
  71. vid[0].contentWindow.postMessage(JSON.stringify({method: 'addEventListener', value: prop}), api);
  72. }
  73. }
  74. //if methods are sent before video is ready, call them now
  75. if(vid.data("vimeoAPICall")){
  76. var vdata = vid.data("vimeoAPICall");
  77. for(var i=0; i< vdata.length; i++){
  78. vid[0].contentWindow.postMessage(JSON.stringify(vdata[i].message), vdata[i].api);
  79. }
  80. vid.removeData("vimeoAPICall");
  81. }
  82. //this video is ready
  83. vid.data("vimeoReady", true);
  84. vid.triggerHandler("ready");
  85. break;
  86. case 'seek':
  87. vid.triggerHandler("seek", [d.data]);
  88. break;
  89. case 'loadprogress':
  90. vid.triggerHandler("loadProgress", [d.data]);
  91. break;
  92. case 'playprogress':
  93. vid.triggerHandler("playProgress", [d.data]);
  94. break;
  95. case 'pause':
  96. vid.triggerHandler("pause");
  97. break;
  98. case 'finish':
  99. vid.triggerHandler("finish");
  100. break;
  101. case 'play':
  102. vid.triggerHandler("play");
  103. break;
  104. case 'cuechange':
  105. vid.triggerHandler("cuechange");
  106. break;
  107. }
  108. }
  109. };
  110. $(window).on("message", function(e){ vimeoJqueryAPI.init(e); });
  111. /**
  112. * Vimeo jQuery method plugin
  113. *
  114. * @param element {jQuery Object} The element this was called on (verifies it's an iframe)
  115. * @param option1 {string} The method to send to vimeo.
  116. * @param option2 {string|function} If a string, it's the value (i.e. setVolume 2) otherwise, it's a callback function
  117. */
  118. $.vimeo = function(element, option1, option2) {
  119. var message = {},
  120. catchMethodLength = vimeoJqueryAPI.catchMethods.methodreturn.length;
  121. if(typeof option1 === "string")
  122. message.method = option1;
  123. if(typeof option2 !== undefined && typeof option2 !== "function")
  124. message.value = option2;
  125. //call method, but check if video was ready, otherwise cue it up with jQuery data to be called when video is ready
  126. if(element.prop("tagName").toLowerCase() === 'iframe' && message.hasOwnProperty("method")){
  127. if(element.data("vimeoReady")){
  128. element[0].contentWindow.postMessage(JSON.stringify(message), vimeoJqueryAPI.setVimeoAPIurl(element));
  129. } else {
  130. var _data = element.data("vimeoAPICall") ? element.data("vimeoAPICall") : [];
  131. _data.push({message:message, api:vimeoJqueryAPI.setVimeoAPIurl(element)});
  132. element.data("vimeoAPICall", _data);
  133. }
  134. }
  135. //If this method will return data, (starts with "get") then use callback once return message comes through
  136. if((option1.toString().substr(0, 3) === "get" || option1.toString() === "paused") && typeof option2 === "function"){
  137. (function(cml, func, i){
  138. var interval = window.setInterval(function(){
  139. if(vimeoJqueryAPI.catchMethods.methodreturn.length != cml){
  140. window.clearInterval(interval);
  141. func(vimeoJqueryAPI.catchMethods.methodreturn[i]);
  142. }
  143. }, 10);
  144. })(catchMethodLength, option2, vimeoJqueryAPI.catchMethods.count);
  145. vimeoJqueryAPI.catchMethods.count++;
  146. }
  147. return element;
  148. };
  149. $.fn.vimeo = function(option1, option2) {
  150. return $.vimeo(this, option1, option2);
  151. };
  152. })(jQuery, window);