lg-video.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  1. /*! lg-video - v1.0.0 - 2016-09-20
  2. * http://sachinchoolur.github.io/lightGallery
  3. * Copyright (c) 2016 Sachin N; Licensed GPLv3 */
  4. (function (root, factory) {
  5. if (typeof define === 'function' && define.amd) {
  6. // AMD. Register as an anonymous module unless amdModuleId is set
  7. define([], function () {
  8. return (factory());
  9. });
  10. } else if (typeof exports === 'object') {
  11. // Node. Does not work with strict CommonJS, but
  12. // only CommonJS-like environments that support module.exports,
  13. // like Node.
  14. module.exports = factory();
  15. } else {
  16. factory();
  17. }
  18. }(this, function () {
  19. (function($, window, document, undefined) {
  20. 'use strict';
  21. var defaults = {
  22. videoMaxWidth: '855px',
  23. youtubePlayerParams: false,
  24. vimeoPlayerParams: false,
  25. dailymotionPlayerParams: false,
  26. vkPlayerParams: false,
  27. videojs: false,
  28. videojsOptions: {}
  29. };
  30. var Video = function(element) {
  31. this.core = $(element).data('lightGallery');
  32. this.$el = $(element);
  33. this.core.s = $.extend({}, defaults, this.core.s);
  34. this.videoLoaded = false;
  35. this.init();
  36. return this;
  37. };
  38. Video.prototype.init = function() {
  39. var _this = this;
  40. // Event triggered when video url found without poster
  41. _this.core.$el.on('hasVideo.lg.tm', function(event, index, src, html) {
  42. _this.core.$slide.eq(index).find('.lg-video').append(_this.loadVideo(src, 'lg-object', true, index, html));
  43. if (html) {
  44. if (_this.core.s.videojs) {
  45. try {
  46. videojs(_this.core.$slide.eq(index).find('.lg-html5').get(0), _this.core.s.videojsOptions, function() {
  47. if (!_this.videoLoaded) {
  48. this.play();
  49. }
  50. });
  51. } catch (e) {
  52. console.error('Make sure you have included videojs');
  53. }
  54. } else {
  55. _this.core.$slide.eq(index).find('.lg-html5').get(0).play();
  56. }
  57. }
  58. });
  59. // Set max width for video
  60. _this.core.$el.on('onAferAppendSlide.lg.tm', function(event, index) {
  61. _this.core.$slide.eq(index).find('.lg-video-cont').css('max-width', _this.core.s.videoMaxWidth);
  62. _this.videoLoaded = true;
  63. });
  64. var loadOnClick = function($el) {
  65. // check slide has poster
  66. if ($el.find('.lg-object').hasClass('lg-has-poster') && $el.find('.lg-object').is(':visible')) {
  67. // check already video element present
  68. if (!$el.hasClass('lg-has-video')) {
  69. $el.addClass('lg-video-playing lg-has-video');
  70. var _src;
  71. var _html;
  72. var _loadVideo = function(_src, _html) {
  73. $el.find('.lg-video').append(_this.loadVideo(_src, '', false, _this.core.index, _html));
  74. if (_html) {
  75. if (_this.core.s.videojs) {
  76. try {
  77. videojs(_this.core.$slide.eq(_this.core.index).find('.lg-html5').get(0), _this.core.s.videojsOptions, function() {
  78. this.play();
  79. });
  80. } catch (e) {
  81. console.error('Make sure you have included videojs');
  82. }
  83. } else {
  84. _this.core.$slide.eq(_this.core.index).find('.lg-html5').get(0).play();
  85. }
  86. }
  87. };
  88. if (_this.core.s.dynamic) {
  89. _src = _this.core.s.dynamicEl[_this.core.index].src;
  90. _html = _this.core.s.dynamicEl[_this.core.index].html;
  91. _loadVideo(_src, _html);
  92. } else {
  93. _src = _this.core.$items.eq(_this.core.index).attr('href') || _this.core.$items.eq(_this.core.index).attr('data-src');
  94. _html = _this.core.$items.eq(_this.core.index).attr('data-html');
  95. _loadVideo(_src, _html);
  96. }
  97. var $tempImg = $el.find('.lg-object');
  98. $el.find('.lg-video').append($tempImg);
  99. // @todo loading icon for html5 videos also
  100. // for showing the loading indicator while loading video
  101. if (!$el.find('.lg-video-object').hasClass('lg-html5')) {
  102. $el.removeClass('lg-complete');
  103. $el.find('.lg-video-object').on('load.lg error.lg', function() {
  104. $el.addClass('lg-complete');
  105. });
  106. }
  107. } else {
  108. var youtubePlayer = $el.find('.lg-youtube').get(0);
  109. var vimeoPlayer = $el.find('.lg-vimeo').get(0);
  110. var dailymotionPlayer = $el.find('.lg-dailymotion').get(0);
  111. var html5Player = $el.find('.lg-html5').get(0);
  112. if (youtubePlayer) {
  113. youtubePlayer.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
  114. } else if (vimeoPlayer) {
  115. try {
  116. $f(vimeoPlayer).api('play');
  117. } catch (e) {
  118. console.error('Make sure you have included froogaloop2 js');
  119. }
  120. } else if (dailymotionPlayer) {
  121. dailymotionPlayer.contentWindow.postMessage('play', '*');
  122. } else if (html5Player) {
  123. if (_this.core.s.videojs) {
  124. try {
  125. videojs(html5Player).play();
  126. } catch (e) {
  127. console.error('Make sure you have included videojs');
  128. }
  129. } else {
  130. html5Player.play();
  131. }
  132. }
  133. $el.addClass('lg-video-playing');
  134. }
  135. }
  136. };
  137. if (_this.core.doCss() && _this.core.$items.length > 1 && ((_this.core.s.enableSwipe && _this.core.isTouch) || (_this.core.s.enableDrag && !_this.core.isTouch))) {
  138. _this.core.$el.on('onSlideClick.lg.tm', function() {
  139. var $el = _this.core.$slide.eq(_this.core.index);
  140. loadOnClick($el);
  141. });
  142. } else {
  143. // For IE 9 and bellow
  144. _this.core.$slide.on('click.lg', function() {
  145. loadOnClick($(this));
  146. });
  147. }
  148. _this.core.$el.on('onBeforeSlide.lg.tm', function(event, prevIndex, index) {
  149. var $videoSlide = _this.core.$slide.eq(prevIndex);
  150. var youtubePlayer = $videoSlide.find('.lg-youtube').get(0);
  151. var vimeoPlayer = $videoSlide.find('.lg-vimeo').get(0);
  152. var dailymotionPlayer = $videoSlide.find('.lg-dailymotion').get(0);
  153. var vkPlayer = $videoSlide.find('.lg-vk').get(0);
  154. var html5Player = $videoSlide.find('.lg-html5').get(0);
  155. if (youtubePlayer) {
  156. youtubePlayer.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
  157. } else if (vimeoPlayer) {
  158. try {
  159. $f(vimeoPlayer).api('pause');
  160. } catch (e) {
  161. console.error('Make sure you have included froogaloop2 js');
  162. }
  163. } else if (dailymotionPlayer) {
  164. dailymotionPlayer.contentWindow.postMessage('pause', '*');
  165. } else if (html5Player) {
  166. if (_this.core.s.videojs) {
  167. try {
  168. videojs(html5Player).pause();
  169. } catch (e) {
  170. console.error('Make sure you have included videojs');
  171. }
  172. } else {
  173. html5Player.pause();
  174. }
  175. } if (vkPlayer) {
  176. $(vkPlayer).attr('src', $(vkPlayer).attr('src').replace('&autoplay', '&noplay'));
  177. }
  178. var _src;
  179. if (_this.core.s.dynamic) {
  180. _src = _this.core.s.dynamicEl[index].src;
  181. } else {
  182. _src = _this.core.$items.eq(index).attr('href') || _this.core.$items.eq(index).attr('data-src');
  183. }
  184. var _isVideo = _this.core.isVideo(_src, index) || {};
  185. if (_isVideo.youtube || _isVideo.vimeo || _isVideo.dailymotion || _isVideo.vk) {
  186. _this.core.$outer.addClass('lg-hide-download');
  187. }
  188. //$videoSlide.addClass('lg-complete');
  189. });
  190. _this.core.$el.on('onAfterSlide.lg.tm', function(event, prevIndex) {
  191. _this.core.$slide.eq(prevIndex).removeClass('lg-video-playing');
  192. });
  193. };
  194. Video.prototype.loadVideo = function(src, addClass, noposter, index, html) {
  195. var video = '';
  196. var autoplay = 1;
  197. var a = '';
  198. var isVideo = this.core.isVideo(src, index) || {};
  199. // Enable autoplay for first video if poster doesn't exist
  200. if (noposter) {
  201. if (this.videoLoaded) {
  202. autoplay = 0;
  203. } else {
  204. autoplay = 1;
  205. }
  206. }
  207. if (isVideo.youtube) {
  208. a = '?wmode=opaque&autoplay=' + autoplay + '&enablejsapi=1';
  209. if (this.core.s.youtubePlayerParams) {
  210. a = a + '&' + $.param(this.core.s.youtubePlayerParams);
  211. }
  212. video = '<iframe class="lg-video-object lg-youtube ' + addClass + '" width="560" height="315" src="//www.youtube.com/embed/' + isVideo.youtube[1] + a + '" frameborder="0" allowfullscreen></iframe>';
  213. } else if (isVideo.vimeo) {
  214. a = '?autoplay=' + autoplay + '&api=1';
  215. if (this.core.s.vimeoPlayerParams) {
  216. a = a + '&' + $.param(this.core.s.vimeoPlayerParams);
  217. }
  218. video = '<iframe class="lg-video-object lg-vimeo ' + addClass + '" width="560" height="315" src="//player.vimeo.com/video/' + isVideo.vimeo[1] + a + '" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
  219. } else if (isVideo.dailymotion) {
  220. a = '?wmode=opaque&autoplay=' + autoplay + '&api=postMessage';
  221. if (this.core.s.dailymotionPlayerParams) {
  222. a = a + '&' + $.param(this.core.s.dailymotionPlayerParams);
  223. }
  224. video = '<iframe class="lg-video-object lg-dailymotion ' + addClass + '" width="560" height="315" src="//www.dailymotion.com/embed/video/' + isVideo.dailymotion[1] + a + '" frameborder="0" allowfullscreen></iframe>';
  225. } else if (isVideo.html5) {
  226. var fL = html.substring(0, 1);
  227. if (fL === '.' || fL === '#') {
  228. html = $(html).html();
  229. }
  230. video = html;
  231. } else if (isVideo.vk) {
  232. a = '&autoplay=' + autoplay;
  233. if (this.core.s.vkPlayerParams) {
  234. a = a + '&' + $.param(this.core.s.vkPlayerParams);
  235. }
  236. video = '<iframe class="lg-video-object lg-vk ' + addClass + '" width="560" height="315" src="http://vk.com/video_ext.php?' + isVideo.vk[1] + a + '" frameborder="0" allowfullscreen></iframe>';
  237. }
  238. return video;
  239. };
  240. Video.prototype.destroy = function() {
  241. this.videoLoaded = false;
  242. };
  243. $.fn.lightGallery.modules.video = Video;
  244. })(jQuery, window, document);
  245. }));