lg-video.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  1. /**!
  2. * lg-video.js | 0.0.1 | August 1st 2016
  3. * http://sachinchoolur.github.io/lg-video.js
  4. * Copyright (c) 2016 Sachin N;
  5. * @license Apache 2.0
  6. */(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.LgVideo = f()}})(function(){var define,module,exports;return (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(require,module,exports){
  7. (function (global, factory) {
  8. if (typeof define === "function" && define.amd) {
  9. define([], factory);
  10. } else if (typeof exports !== "undefined") {
  11. factory();
  12. } else {
  13. var mod = {
  14. exports: {}
  15. };
  16. factory();
  17. global.lgVideo = mod.exports;
  18. }
  19. })(this, function () {
  20. 'use strict';
  21. var _extends = Object.assign || function (target) {
  22. for (var i = 1; i < arguments.length; i++) {
  23. var source = arguments[i];
  24. for (var key in source) {
  25. if (Object.prototype.hasOwnProperty.call(source, key)) {
  26. target[key] = source[key];
  27. }
  28. }
  29. }
  30. return target;
  31. };
  32. var videoDefaults = {
  33. videoMaxWidth: '855px',
  34. youtubePlayerParams: false,
  35. vimeoPlayerParams: false,
  36. dailymotionPlayerParams: false,
  37. vkPlayerParams: false,
  38. videojs: false,
  39. videojsOptions: {}
  40. };
  41. var Video = function Video(element) {
  42. this.el = element;
  43. this.core = window.lgData[this.el.getAttribute('lg-uid')];
  44. this.core.s = _extends({}, videoDefaults, this.core.s);
  45. this.videoLoaded = false;
  46. this.init();
  47. return this;
  48. };
  49. Video.prototype.init = function () {
  50. var _this = this;
  51. // Event triggered when video url found without poster
  52. utils.on(_this.core.el, 'hasVideo.lgtm', function (event) {
  53. _this.core.___slide[event.detail.index].querySelector('.lg-video').insertAdjacentHTML('beforeend', _this.loadVideo(event.detail.src, 'lg-object', true, event.detail.index, event.detail.html));
  54. if (event.detail.html) {
  55. if (_this.core.s.videojs) {
  56. try {
  57. videojs(_this.core.___slide[event.detail.index].querySelector('.lg-html5'), _this.core.s.videojsOptions, function () {
  58. if (!_this.videoLoaded) {
  59. this.play();
  60. }
  61. });
  62. } catch (e) {
  63. console.error('Make sure you have included videojs');
  64. }
  65. } else {
  66. _this.core.___slide[event.detail.index].querySelector('.lg-html5').play();
  67. }
  68. }
  69. });
  70. // Set max width for video
  71. utils.on(_this.core.el, 'onAferAppendSlide.lgtm', function (event) {
  72. if (_this.core.___slide[event.detail.index].querySelector('.lg-video-cont')) {
  73. _this.core.___slide[event.detail.index].querySelector('.lg-video-cont').style.maxWidth = _this.core.s.videoMaxWidth;
  74. _this.videoLoaded = true;
  75. }
  76. });
  77. var loadOnClick = function loadOnClick($el) {
  78. // check slide has poster
  79. if (utils.hasClass($el.querySelector('.lg-object'), 'lg-has-poster') && $el.querySelector('.lg-object').style.display !== 'none') {
  80. // check already video element present
  81. if (!utils.hasClass($el, 'lg-has-video')) {
  82. utils.addClass($el, 'lg-video-playing lg-has-video');
  83. var _src;
  84. var _html;
  85. var _loadVideo = function _loadVideo(_src, _html) {
  86. $el.querySelector('.lg-video').insertAdjacentHTML('beforeend', _this.loadVideo(_src, '', false, _this.core.index, _html));
  87. if (_html) {
  88. if (_this.core.s.videojs) {
  89. try {
  90. videojs(_this.core.___slide[_this.core.index].querySelector('.lg-html5'), _this.core.s.videojsOptions, function () {
  91. this.play();
  92. });
  93. } catch (e) {
  94. console.error('Make sure you have included videojs');
  95. }
  96. } else {
  97. _this.core.___slide[_this.core.index].querySelector('.lg-html5').play();
  98. }
  99. }
  100. };
  101. if (_this.core.s.dynamic) {
  102. _src = _this.core.s.dynamicEl[_this.core.index].src;
  103. _html = _this.core.s.dynamicEl[_this.core.index].html;
  104. _loadVideo(_src, _html);
  105. } else {
  106. _src = _this.core.items[_this.core.index].getAttribute('href') || _this.core.items[_this.core.index].getAttribute('data-src');
  107. _html = _this.core.items[_this.core.index].getAttribute('data-html');
  108. _loadVideo(_src, _html);
  109. }
  110. var $tempImg = $el.querySelector('.lg-object');
  111. $el.querySelector('.lg-video').appendChild($tempImg);
  112. // @todo loading icon for html5 videos also
  113. // for showing the loading indicator while loading video
  114. if (!utils.hasClass($el.querySelector('.lg-video-object'), 'lg-html5')) {
  115. utils.removeClass($el, 'lg-complete');
  116. utils.on($el.querySelector('.lg-video-object'), 'load.lg error.lg', function () {
  117. utils.addClass($el, 'lg-complete');
  118. });
  119. }
  120. } else {
  121. var youtubePlayer = $el.querySelector('.lg-youtube');
  122. var vimeoPlayer = $el.querySelector('.lg-vimeo');
  123. var dailymotionPlayer = $el.querySelector('.lg-dailymotion');
  124. var html5Player = $el.querySelector('.lg-html5');
  125. if (youtubePlayer) {
  126. youtubePlayer.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
  127. } else if (vimeoPlayer) {
  128. try {
  129. $f(vimeoPlayer).api('play');
  130. } catch (e) {
  131. console.error('Make sure you have included froogaloop2 js');
  132. }
  133. } else if (dailymotionPlayer) {
  134. dailymotionPlayer.contentWindow.postMessage('play', '*');
  135. } else if (html5Player) {
  136. if (_this.core.s.videojs) {
  137. try {
  138. videojs(html5Player).play();
  139. } catch (e) {
  140. console.error('Make sure you have included videojs');
  141. }
  142. } else {
  143. html5Player.play();
  144. }
  145. }
  146. utils.addClass($el, 'lg-video-playing');
  147. }
  148. }
  149. };
  150. if (_this.core.doCss() && _this.core.items.length > 1 && (_this.core.s.enableSwipe && _this.core.isTouch || _this.core.s.enableDrag && !_this.core.isTouch)) {
  151. utils.on(_this.core.el, 'onSlideClick.lgtm', function () {
  152. var $el = _this.core.___slide[_this.core.index];
  153. loadOnClick($el);
  154. });
  155. } else {
  156. // For IE 9 and bellow
  157. for (var i = 0; i < _this.core.___slide.length; i++) {
  158. /*jshint loopfunc: true */
  159. (function (index) {
  160. utils.on(_this.core.___slide[index], 'click.lg', function () {
  161. loadOnClick(_this.core.___slide[index]);
  162. });
  163. })(i);
  164. }
  165. }
  166. utils.on(_this.core.el, 'onBeforeSlide.lgtm', function (event) {
  167. var $videoSlide = _this.core.___slide[event.detail.prevIndex];
  168. var youtubePlayer = $videoSlide.querySelector('.lg-youtube');
  169. var vimeoPlayer = $videoSlide.querySelector('.lg-vimeo');
  170. var dailymotionPlayer = $videoSlide.querySelector('.lg-dailymotion');
  171. var vkPlayer = $videoSlide.querySelector('.lg-vk');
  172. var html5Player = $videoSlide.querySelector('.lg-html5');
  173. if (youtubePlayer) {
  174. youtubePlayer.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
  175. } else if (vimeoPlayer) {
  176. try {
  177. $f(vimeoPlayer).api('pause');
  178. } catch (e) {
  179. console.error('Make sure you have included froogaloop2 js');
  180. }
  181. } else if (dailymotionPlayer) {
  182. dailymotionPlayer.contentWindow.postMessage('pause', '*');
  183. } else if (html5Player) {
  184. if (_this.core.s.videojs) {
  185. try {
  186. videojs(html5Player).pause();
  187. } catch (e) {
  188. console.error('Make sure you have included videojs');
  189. }
  190. } else {
  191. html5Player.pause();
  192. }
  193. }if (vkPlayer) {
  194. vkPlayer.setAttribute('src', vkPlayer.getAttribute('src').replace('&autoplay', '&noplay'));
  195. }
  196. var _src;
  197. if (_this.core.s.dynamic) {
  198. _src = _this.core.s.dynamicEl[event.detail.index].src;
  199. } else {
  200. _src = _this.core.items[event.detail.index].getAttribute('href') || _this.core.items[event.detail.index].getAttribute('data-src');
  201. }
  202. var _isVideo = _this.core.isVideo(_src, event.detail.index) || {};
  203. if (_isVideo.youtube || _isVideo.vimeo || _isVideo.dailymotion || _isVideo.vk) {
  204. utils.addClass(_this.core.outer, 'lg-hide-download');
  205. }
  206. //$videoSlide.addClass('lg-complete');
  207. });
  208. utils.on(_this.core.el, 'onAfterSlide.lgtm', function (event) {
  209. utils.removeClass(_this.core.___slide[event.detail.prevIndex], 'lg-video-playing');
  210. });
  211. };
  212. Video.prototype.loadVideo = function (src, addClass, noposter, index, html) {
  213. var video = '';
  214. var autoplay = 1;
  215. var a = '';
  216. var isVideo = this.core.isVideo(src, index) || {};
  217. // Enable autoplay for first video if poster doesn't exist
  218. if (noposter) {
  219. if (this.videoLoaded) {
  220. autoplay = 0;
  221. } else {
  222. autoplay = 1;
  223. }
  224. }
  225. if (isVideo.youtube) {
  226. a = '?wmode=opaque&autoplay=' + autoplay + '&enablejsapi=1';
  227. if (this.core.s.youtubePlayerParams) {
  228. a = a + '&' + utils.param(this.core.s.youtubePlayerParams);
  229. }
  230. 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>';
  231. } else if (isVideo.vimeo) {
  232. a = '?autoplay=' + autoplay + '&api=1';
  233. if (this.core.s.vimeoPlayerParams) {
  234. a = a + '&' + utils.param(this.core.s.vimeoPlayerParams);
  235. }
  236. 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>';
  237. } else if (isVideo.dailymotion) {
  238. a = '?wmode=opaque&autoplay=' + autoplay + '&api=postMessage';
  239. if (this.core.s.dailymotionPlayerParams) {
  240. a = a + '&' + utils.param(this.core.s.dailymotionPlayerParams);
  241. }
  242. 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>';
  243. } else if (isVideo.html5) {
  244. var fL = html.substring(0, 1);
  245. if (fL === '.' || fL === '#') {
  246. html = document.querySelector(html).innerHTML;
  247. }
  248. video = html;
  249. } else if (isVideo.vk) {
  250. a = '&autoplay=' + autoplay;
  251. if (this.core.s.vkPlayerParams) {
  252. a = a + '&' + utils.param(this.core.s.vkPlayerParams);
  253. }
  254. 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>';
  255. }
  256. return video;
  257. };
  258. Video.prototype.destroy = function () {
  259. this.videoLoaded = false;
  260. };
  261. window.lgModules.video = Video;
  262. });
  263. },{}]},{},[1])(1)
  264. });