facebook.js 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361
  1. /*!
  2. * MediaElement.js
  3. * http://www.mediaelementjs.com/
  4. *
  5. * Wrapper that mimics native HTML5 MediaElement (audio and video)
  6. * using a variety of technologies (pure JavaScript, Flash, iframe)
  7. *
  8. * Copyright 2010-2017, John Dyer (http://j.hn/)
  9. * License: MIT
  10. *
  11. */(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
  12. 'use strict';
  13. var FacebookApi = {
  14. promise: null,
  15. load: function load(settings) {
  16. if (typeof FB !== 'undefined') {
  17. FacebookApi._createPlayer(settings);
  18. } else {
  19. FacebookApi.promise = FacebookApi.promise || mejs.Utils.loadScript('https://connect.facebook.net/' + settings.options.lang + '/sdk.js');
  20. FacebookApi.promise.then(function () {
  21. FB.init(settings.options);
  22. setTimeout(function () {
  23. FacebookApi._createPlayer(settings);
  24. }, 50);
  25. });
  26. }
  27. },
  28. _createPlayer: function _createPlayer(settings) {
  29. window['__ready__' + settings.id]();
  30. }
  31. };
  32. var FacebookRenderer = {
  33. name: 'facebook',
  34. options: {
  35. prefix: 'facebook',
  36. facebook: {
  37. appId: '',
  38. xfbml: true,
  39. version: 'v2.10',
  40. lang: 'en_US'
  41. }
  42. },
  43. canPlayType: function canPlayType(type) {
  44. return ~['video/facebook', 'video/x-facebook'].indexOf(type.toLowerCase());
  45. },
  46. create: function create(mediaElement, options, mediaFiles) {
  47. var apiStack = [],
  48. fb = {},
  49. readyState = 4;
  50. var hasStartedPlaying = false,
  51. paused = true,
  52. ended = false,
  53. fbPlayer = null,
  54. src = '',
  55. poster = '',
  56. autoplay = mediaElement.originalNode.autoplay;
  57. fb.options = options;
  58. fb.id = mediaElement.id + '_' + options.prefix;
  59. fb.mediaElement = mediaElement;
  60. if (mejs.Features.isiPhone && mediaElement.originalNode.getAttribute('poster')) {
  61. poster = mediaElement.originalNode.getAttribute('poster');
  62. mediaElement.originalNode.removeAttribute('poster');
  63. }
  64. var props = mejs.html5media.properties,
  65. assignGettersSetters = function assignGettersSetters(propName) {
  66. var capName = '' + propName.substring(0, 1).toUpperCase() + propName.substring(1);
  67. fb['get' + capName] = function () {
  68. if (fbPlayer !== null) {
  69. var value = null;
  70. switch (propName) {
  71. case 'currentTime':
  72. return fbPlayer.getCurrentPosition();
  73. case 'duration':
  74. return fbPlayer.getDuration();
  75. case 'volume':
  76. return fbPlayer.getVolume();
  77. case 'paused':
  78. return paused;
  79. case 'ended':
  80. return ended;
  81. case 'muted':
  82. return fbPlayer.isMuted();
  83. case 'buffered':
  84. return {
  85. start: function start() {
  86. return 0;
  87. },
  88. end: function end() {
  89. return 0;
  90. },
  91. length: 1
  92. };
  93. case 'src':
  94. return src;
  95. case 'readyState':
  96. return readyState;
  97. }
  98. return value;
  99. } else {
  100. return null;
  101. }
  102. };
  103. fb['set' + capName] = function (value) {
  104. if (fbPlayer !== null) {
  105. switch (propName) {
  106. case 'src':
  107. var url = typeof value === 'string' ? value : value[0].src;
  108. src = url;
  109. fbContainer.remove();
  110. fbContainer = document.createElement('div');
  111. fbContainer.id = fb.id;
  112. fbContainer.className = 'fb-video';
  113. fbContainer.setAttribute('data-href', url);
  114. fbContainer.setAttribute('data-allowfullscreen', 'true');
  115. fbContainer.setAttribute('data-controls', 'false');
  116. mediaElement.originalNode.parentNode.insertBefore(fbContainer, mediaElement.originalNode);
  117. mediaElement.originalNode.style.display = 'none';
  118. FacebookApi.load({
  119. lang: fb.options.lang,
  120. id: fb.id
  121. });
  122. FB.XFBML.parse();
  123. if (autoplay) {
  124. fbPlayer.play();
  125. }
  126. break;
  127. case 'currentTime':
  128. fbPlayer.seek(value);
  129. break;
  130. case 'muted':
  131. if (value) {
  132. fbPlayer.mute();
  133. } else {
  134. fbPlayer.unmute();
  135. }
  136. setTimeout(function () {
  137. var event = mejs.Utils.createEvent('volumechange', fb);
  138. mediaElement.dispatchEvent(event);
  139. }, 50);
  140. break;
  141. case 'volume':
  142. fbPlayer.setVolume(value);
  143. setTimeout(function () {
  144. var event = mejs.Utils.createEvent('volumechange', fb);
  145. mediaElement.dispatchEvent(event);
  146. }, 50);
  147. break;
  148. case 'readyState':
  149. var event = mejs.Utils.createEvent('canplay', fb);
  150. mediaElement.dispatchEvent(event);
  151. break;
  152. default:
  153. break;
  154. }
  155. } else {
  156. apiStack.push({ type: 'set', propName: propName, value: value });
  157. }
  158. };
  159. };
  160. for (var i = 0, total = props.length; i < total; i++) {
  161. assignGettersSetters(props[i]);
  162. }
  163. var methods = mejs.html5media.methods,
  164. assignMethods = function assignMethods(methodName) {
  165. fb[methodName] = function () {
  166. if (fbPlayer !== null) {
  167. switch (methodName) {
  168. case 'play':
  169. return fbPlayer.play();
  170. case 'pause':
  171. return fbPlayer.pause();
  172. case 'load':
  173. return null;
  174. }
  175. } else {
  176. apiStack.push({ type: 'call', methodName: methodName });
  177. }
  178. };
  179. };
  180. for (var _i = 0, _total = methods.length; _i < _total; _i++) {
  181. assignMethods(methods[_i]);
  182. }
  183. function assignEvents(events) {
  184. for (var _i2 = 0, _total2 = events.length; _i2 < _total2; _i2++) {
  185. var event = mejs.Utils.createEvent(events[_i2], fb);
  186. mediaElement.dispatchEvent(event);
  187. }
  188. }
  189. window['__ready__' + fb.id] = function () {
  190. FB.Event.subscribe('xfbml.ready', function (msg) {
  191. if (msg.type === 'video' && fb.id === msg.id) {
  192. mediaElement.fbPlayer = fbPlayer = msg.instance;
  193. var fbIframe = document.getElementById(fb.id),
  194. width = fbIframe.offsetWidth,
  195. height = fbIframe.offsetHeight,
  196. events = ['mouseover', 'mouseout'],
  197. assignIframeEvents = function assignIframeEvents(e) {
  198. var event = mejs.Utils.createEvent(e.type, fb);
  199. mediaElement.dispatchEvent(event);
  200. };
  201. fb.setSize(width, height);
  202. if (!mediaElement.originalNode.muted) {
  203. fbPlayer.unmute();
  204. }
  205. if (autoplay) {
  206. fbPlayer.play();
  207. }
  208. for (var _i3 = 0, _total3 = events.length; _i3 < _total3; _i3++) {
  209. fbIframe.addEventListener(events[_i3], assignIframeEvents);
  210. }
  211. fb.eventHandler = {};
  212. var fbEvents = ['startedPlaying', 'paused', 'finishedPlaying', 'startedBuffering', 'finishedBuffering'];
  213. for (var _i4 = 0, _total4 = fbEvents.length; _i4 < _total4; _i4++) {
  214. var event = fbEvents[_i4],
  215. handler = fb.eventHandler[event];
  216. if (handler !== undefined && handler !== null && !mejs.Utils.isObjectEmpty(handler) && typeof handler.removeListener === 'function') {
  217. handler.removeListener(event);
  218. }
  219. }
  220. if (apiStack.length) {
  221. for (var _i5 = 0, _total5 = apiStack.length; _i5 < _total5; _i5++) {
  222. var stackItem = apiStack[_i5];
  223. if (stackItem.type === 'set') {
  224. var propName = stackItem.propName,
  225. capName = '' + propName.substring(0, 1).toUpperCase() + propName.substring(1);
  226. fb['set' + capName](stackItem.value);
  227. } else if (stackItem.type === 'call') {
  228. fb[stackItem.methodName]();
  229. }
  230. }
  231. }
  232. assignEvents(['rendererready', 'loadeddata', 'canplay', 'progress', 'loadedmetadata', 'timeupdate']);
  233. var timer = void 0;
  234. fb.eventHandler.startedPlaying = fbPlayer.subscribe('startedPlaying', function () {
  235. if (!hasStartedPlaying) {
  236. hasStartedPlaying = true;
  237. }
  238. paused = false;
  239. ended = false;
  240. assignEvents(['play', 'playing', 'timeupdate']);
  241. timer = setInterval(function () {
  242. fbPlayer.getCurrentPosition();
  243. assignEvents(['timeupdate']);
  244. }, 250);
  245. });
  246. fb.eventHandler.paused = fbPlayer.subscribe('paused', function () {
  247. paused = true;
  248. ended = false;
  249. assignEvents(['pause']);
  250. });
  251. fb.eventHandler.finishedPlaying = fbPlayer.subscribe('finishedPlaying', function () {
  252. paused = true;
  253. ended = true;
  254. assignEvents(['ended']);
  255. clearInterval(timer);
  256. timer = null;
  257. });
  258. fb.eventHandler.startedBuffering = fbPlayer.subscribe('startedBuffering', function () {
  259. assignEvents(['progress', 'timeupdate']);
  260. });
  261. fb.eventHandler.finishedBuffering = fbPlayer.subscribe('finishedBuffering', function () {
  262. assignEvents(['progress', 'timeupdate']);
  263. });
  264. }
  265. });
  266. };
  267. src = mediaFiles[0].src;
  268. var fbContainer = document.createElement('div');
  269. fbContainer.id = fb.id;
  270. fbContainer.className = 'fb-video';
  271. fbContainer.setAttribute('data-href', src);
  272. fbContainer.setAttribute('data-allowfullscreen', 'true');
  273. fbContainer.setAttribute('data-controls', !!mediaElement.originalNode.controls);
  274. mediaElement.originalNode.parentNode.insertBefore(fbContainer, mediaElement.originalNode);
  275. mediaElement.originalNode.style.display = 'none';
  276. FacebookApi.load({
  277. options: fb.options.facebook,
  278. id: fb.id
  279. });
  280. fb.hide = function () {
  281. fb.pause();
  282. if (fbPlayer) {
  283. fbContainer.style.display = 'none';
  284. }
  285. };
  286. fb.setSize = function (width) {
  287. if (fbPlayer !== null && !isNaN(width)) {
  288. fbContainer.style.width = width;
  289. }
  290. };
  291. fb.show = function () {
  292. if (fbPlayer) {
  293. fbContainer.style.display = '';
  294. }
  295. };
  296. fb.destroy = function () {
  297. if (poster) {
  298. mediaElement.originalNode.setAttribute('poster', poster);
  299. }
  300. };
  301. return fb;
  302. }
  303. };
  304. mejs.Utils.typeChecks.push(function (url) {
  305. return ~url.toLowerCase().indexOf('//www.facebook') ? 'video/x-facebook' : null;
  306. });
  307. mejs.Renderers.add(FacebookRenderer);
  308. },{}]},{},[1]);