PageRenderTime 47ms CodeModel.GetById 19ms RepoModel.GetById 0ms app.codeStats 0ms

/backend/Minimal/assets/js/vendor/videobackground/jquery.videobackground.js

https://gitlab.com/kaouech/theme
JavaScript | 410 lines | 261 code | 0 blank | 149 comment | 54 complexity | acadec0ed8415e8ccaeabb17e12796f8 MD5 | raw file
  1. /*!
  2. * jQuery Video Background plugin
  3. * https://github.com/georgepaterson/jquery-videobackground
  4. *
  5. * Copyright 2012, George Paterson
  6. * Dual licensed under the MIT or GPL Version 2 licenses.
  7. *
  8. */
  9. (function ($, document, window) {
  10. /*
  11. * Resize function.
  12. * Triggered if the boolean setting 'resize' is true.
  13. * It will resize the video background based on a resize event initiated on the browser window.
  14. *
  15. */
  16. "use strict";
  17. function resize(that) {
  18. var documentHeight = $(document).height(),
  19. windowHeight = $(window).height();
  20. if (that.settings.resizeTo === 'window') {
  21. $(that).css('height', windowHeight);
  22. } else {
  23. if (windowHeight >= documentHeight) {
  24. $(that).css('height', windowHeight);
  25. } else {
  26. $(that).css('height', documentHeight);
  27. }
  28. }
  29. }
  30. /*
  31. * Preload function.
  32. * Allows for HTML and JavaScript designated in settings to be used while the video is preloading.
  33. *
  34. */
  35. function preload(that) {
  36. $(that.controlbox).append(that.settings.preloadHtml);
  37. if (that.settings.preloadCallback) {
  38. (that.settings.preloadCallback).call(that);
  39. }
  40. }
  41. /*
  42. * Play function.
  43. * Can either be called through the default control interface or directly through the public method.
  44. * Will set the video to play or pause depending on existing state.
  45. * Requires the video to be loaded.
  46. *
  47. */
  48. function play(that) {
  49. var video = that.find('video').get(0),
  50. controller;
  51. if (that.settings.controlPosition) {
  52. controller = $(that.settings.controlPosition).find('.ui-video-background-play a');
  53. } else {
  54. controller = that.find('.ui-video-background-play a');
  55. }
  56. if (video.paused) {
  57. video.play();
  58. controller.toggleClass('ui-icon-pause ui-icon-play').text(that.settings.controlText[1]);
  59. } else {
  60. if (video.ended) {
  61. video.play();
  62. controller.toggleClass('ui-icon-pause ui-icon-play').text(that.settings.controlText[1]);
  63. } else {
  64. video.pause();
  65. controller.toggleClass('ui-icon-pause ui-icon-play').text(that.settings.controlText[0]);
  66. }
  67. }
  68. }
  69. /*
  70. * Mute function.
  71. * Can either be called through the default control interface or directly through the public method.
  72. * Will set the video to mute or unmute depending on existing state.
  73. * Requires the video to be loaded.
  74. *
  75. */
  76. function mute(that) {
  77. var video = that.find('video').get(0),
  78. controller;
  79. if (that.settings.controlPosition) {
  80. controller = $(that.settings.controlPosition).find('.ui-video-background-mute a');
  81. } else {
  82. controller = that.find('.ui-video-background-mute a');
  83. }
  84. if (video.volume === 0) {
  85. video.volume = 1;
  86. controller.toggleClass('ui-icon-volume-on ui-icon-volume-off').text(that.settings.controlText[2]);
  87. } else {
  88. video.volume = 0;
  89. controller.toggleClass('ui-icon-volume-on ui-icon-volume-off').text(that.settings.controlText[3]);
  90. }
  91. }
  92. /*
  93. * Loaded events function.
  94. * When the video is loaded we have some default HTML and JavaScript to trigger.
  95. *
  96. */
  97. function loadedEvents(that) {
  98. /*
  99. * Trigger the resize method based if the browser is resized.
  100. *
  101. */
  102. if (that.settings.resize) {
  103. $(window).on('resize', function () {
  104. resize(that);
  105. });
  106. }
  107. /*
  108. * Default play/pause control
  109. *
  110. */
  111. that.controls.find('.ui-video-background-play a').on('click', function (event) {
  112. event.preventDefault();
  113. play(that);
  114. });
  115. /*
  116. * Default mute/unmute control
  117. *
  118. */
  119. that.controls.find('.ui-video-background-mute a').on('click', function (event) {
  120. event.preventDefault();
  121. mute(that);
  122. });
  123. /*
  124. * Firefox doesn't currently use the loop attribute.
  125. * Loop bound to the video ended event.
  126. *
  127. */
  128. if (that.settings.loop) {
  129. that.find('video').on('ended', function () {
  130. $(this).get(0).play();
  131. $(this).toggleClass('paused').text(that.settings.controlText[1]);
  132. });
  133. }
  134. }
  135. /*
  136. * Loaded function.
  137. * Allows for HTML and JavaScript designated in settings to be used when the video is loaded.
  138. *
  139. */
  140. function loaded(that) {
  141. $(that.controlbox).html(that.controls);
  142. loadedEvents(that);
  143. if (that.settings.loadedCallback) {
  144. (that.settings.loadedCallback).call(that);
  145. }
  146. }
  147. /*
  148. * Public methods accessible through a string declaration equal to the method name.
  149. *
  150. */
  151. var methods = {
  152. /*
  153. * Default initiating public method.
  154. * It will created the video background, default video controls and initiate associated events.
  155. *
  156. */
  157. init: function (options) {
  158. return this.each(function () {
  159. var that = $(this),
  160. compiledSource = '',
  161. attributes = '',
  162. data = that.data('video-options'),
  163. image,
  164. isArray;
  165. if (document.createElement('video').canPlayType) {
  166. that.settings = $.extend(true, {}, $.fn.videobackground.defaults, data, options);
  167. if (!that.settings.initialised) {
  168. that.settings.initialised = true;
  169. /*
  170. * If the resize option is set.
  171. * Set the height of the container to be the height of the document
  172. * The video can expand in to the space using min-height: 100%;
  173. *
  174. */
  175. if (that.settings.resize) {
  176. resize(that);
  177. }
  178. /*
  179. * Compile the different HTML5 video attributes.
  180. *
  181. */
  182. $.each(that.settings.videoSource, function () {
  183. isArray = Object.prototype.toString.call(this) === '[object Array]';
  184. if (isArray && this[1] !== undefined) {
  185. compiledSource = compiledSource + '<source src="' + this[0] + '" type="' + this[1] + '">';
  186. } else {
  187. if (isArray) {
  188. compiledSource = compiledSource + '<source src="' + this[0] + '">';
  189. } else {
  190. compiledSource = compiledSource + '<source src="' + this + '">';
  191. }
  192. }
  193. });
  194. attributes = attributes + 'preload="' + that.settings.preload + '"';
  195. if (that.settings.poster) {
  196. attributes = attributes + ' poster="' + that.settings.poster + '"';
  197. }
  198. if (that.settings.autoplay) {
  199. attributes = attributes + ' autoplay="autoplay"';
  200. }
  201. if (that.settings.loop) {
  202. attributes = attributes + ' loop="loop"';
  203. }
  204. $(that).html('<video ' + attributes + '>' + compiledSource + '</video>');
  205. /*
  206. * Append the control box either to the supplied that or the video background that.
  207. *
  208. */
  209. that.controlbox = $('<div class="ui-video-background ui-widget ui-widget-content ui-corner-all"></div>');
  210. if (that.settings.controlPosition) {
  211. $(that.settings.controlPosition).append(that.controlbox);
  212. } else {
  213. $(that).append(that.controlbox);
  214. }
  215. /*
  216. * HTML string for the video controls.
  217. *
  218. */
  219. that.controls = $('<ul class="ui-video-background-controls"><li class="ui-video-background-play">'
  220. + '<a class="ui-icon ui-icon-pause" href="#">' + that.settings.controlText[1] + '</a>'
  221. + '</li><li class="ui-video-background-mute">'
  222. + '<a class="ui-icon ui-icon-volume-on" href="#">' + that.settings.controlText[2] + '</a>'
  223. + '</li></ul>');
  224. /*
  225. * Test for HTML or JavaScript function that should be triggered while the video is attempting to load.
  226. * The canplaythrough event signals when when the video can play through to the end without disruption.
  227. * We use this to determine when the video is ready to play.
  228. * When this happens preloaded HTML and JavaSCript should be replaced with loaded HTML and JavaSCript.
  229. *
  230. */
  231. if (that.settings.preloadHtml || that.settings.preloadCallback) {
  232. preload(that);
  233. that.find('video').on('canplaythrough', function () {
  234. /*
  235. * Chrome doesn't currently using the autoplay attribute.
  236. * Autoplay initiated through JavaScript.
  237. *
  238. */
  239. if (that.settings.autoplay) {
  240. that.find('video').get(0).play();
  241. }
  242. loaded(that);
  243. });
  244. } else {
  245. that.find('video').on('canplaythrough', function () {
  246. /*
  247. * Chrome doesn't currently using the autoplay attribute.
  248. * Autoplay initiated through JavaScript.
  249. *
  250. */
  251. if (that.settings.autoplay) {
  252. that.find('video').get(0).play();
  253. }
  254. loaded(that);
  255. });
  256. }
  257. that.data('video-options', that.settings);
  258. }
  259. } else {
  260. that.settings = $.extend(true, {}, $.fn.videobackground.defaults, data, options);
  261. if (!that.settings.initialised) {
  262. that.settings.initialised = true;
  263. if (that.settings.poster) {
  264. image = $('<img class="ui-video-background-poster" src="' + that.settings.poster + '">');
  265. that.append(image);
  266. }
  267. that.data('video-options', that.settings);
  268. }
  269. }
  270. });
  271. },
  272. /*
  273. * Play public method.
  274. * When attached to a video background it will trigger the associated video to play or pause.
  275. * The event it triggeres is dependant on the existing state of the video.
  276. * This method can be triggered from an event on a external that.
  277. * If the that has a unique controlPosition this will have to be declared.
  278. * Requires the video to be loaded first.
  279. *
  280. */
  281. play: function (options) {
  282. return this.each(function () {
  283. var that = $(this),
  284. data = that.data('video-options');
  285. that.settings = $.extend(true, {}, data, options);
  286. if (that.settings.initialised) {
  287. play(that);
  288. that.data('video-options', that.settings);
  289. }
  290. });
  291. },
  292. /*
  293. * Mute public method.
  294. * When attached to a video background it will trigger the associated video to mute or unmute.
  295. * The event it triggeres is dependant on the existing state of the video.
  296. * This method can be triggered from an event on a external that.
  297. * If the that has a unique controlPosition this will have to be declared.
  298. * Requires the video to be loaded first.
  299. *
  300. */
  301. mute: function (options) {
  302. return this.each(function () {
  303. var that = $(this),
  304. data = that.data('video-options');
  305. that.settings = $.extend(true, {}, data, options);
  306. if (that.settings.initialised) {
  307. mute(that);
  308. that.data('video-options', that.settings);
  309. }
  310. });
  311. },
  312. /*
  313. * Resize public method.
  314. * When invoked will resize the video background to the height of the document or window.
  315. * The video background height affects the height of the document.
  316. * Affecting the video background's ability to negatively resize.
  317. *
  318. */
  319. resize: function (options) {
  320. return this.each(function () {
  321. var that = $(this),
  322. data = that.data('video-options');
  323. that.settings = $.extend(true, {}, data, options);
  324. if (that.settings.initialised) {
  325. resize(that);
  326. that.data('video-options', that.settings);
  327. }
  328. });
  329. },
  330. /*
  331. * Destroy public method.
  332. * Will unbind event listeners and remove HTML created by the plugin.
  333. * If the that has a unique controlPosition this will have to be declared.
  334. *
  335. */
  336. destroy: function (options) {
  337. return this.each(function () {
  338. var that = $(this),
  339. data = that.data('video-options');
  340. that.settings = $.extend(true, {}, data, options);
  341. if (that.settings.initialised) {
  342. that.settings.initialised = false;
  343. if (document.createElement('video').canPlayType) {
  344. that.find('video').off('ended');
  345. if (that.settings.controlPosition) {
  346. $(that.settings.controlPosition).find('.ui-video-background-mute a').off('click');
  347. $(that.settings.controlPosition).find('.ui-video-background-play a').off('click');
  348. } else {
  349. that.find('.ui-video-background-mute a').off('click');
  350. that.find('.ui-video-background-play a').off('click');
  351. }
  352. $(window).off('resize');
  353. that.find('video').off('canplaythrough');
  354. if (that.settings.controlPosition) {
  355. $(that.settings.controlPosition).find('.ui-video-background').remove();
  356. } else {
  357. that.find('.ui-video-background').remove();
  358. }
  359. $('video', that).remove();
  360. } else {
  361. if (that.settings.poster) {
  362. that.find('.ui-video-background-poster').remove();
  363. }
  364. }
  365. that.removeData('video-options');
  366. }
  367. });
  368. }
  369. };
  370. /*
  371. * The video background namespace.
  372. * The gate way for the plugin.
  373. *
  374. */
  375. $.fn.videobackground = function (method) {
  376. /*
  377. * Allow for method calling.
  378. * If not a method initialise the plugin.
  379. *
  380. */
  381. if (!this.length) {
  382. return this;
  383. }
  384. if (methods[method]) {
  385. return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
  386. }
  387. if (typeof method === 'object' || !method) {
  388. return methods.init.apply(this, arguments);
  389. }
  390. $.error('Method ' + method + ' does not exist on jQuery.videobackground');
  391. };
  392. /*
  393. * Default options, can be extend by options passed to the function.
  394. *
  395. */
  396. $.fn.videobackground.defaults = {
  397. videoSource: [],
  398. poster: null,
  399. autoplay: true,
  400. preload: 'auto',
  401. loop: false,
  402. controlPosition: null,
  403. controlText: ['Play', 'Pause', 'Mute', 'Unmute'],
  404. resize: true,
  405. preloadHtml: '',
  406. preloadCallback: null,
  407. loadedCallback: null,
  408. resizeTo: 'document'
  409. };
  410. }(jQuery, document, window));