Просмотр файла wu-static/js/lightgallery/js/lg-video.js

Конкурс дизайнеров на 15000 рублей
Свежие Креативы и море позитива !!!
Размер файла: 11.71Kb 
  1. /*! lg-video - v1.0.0 - 2016-09-20
  2. * http://sachinchoolur.github.io/lightGallery
  3. * Copyright (c) 2016 Sachin N; Licensed GPLv3 */
  4.  
  5. (function (root, factory) {
  6.   if (typeof define === 'function' && define.amd) {
  7.     // AMD. Register as an anonymous module unless amdModuleId is set
  8.     define([], function () {
  9.       return (factory());
  10.     });
  11.   } else if (typeof exports === 'object') {
  12.     // Node. Does not work with strict CommonJS, but
  13.     // only CommonJS-like environments that support module.exports,
  14.     // like Node.
  15.     module.exports = factory();
  16.   } else {
  17.     factory();
  18.   }
  19. }(this, function () {
  20.  
  21. (function($, window, document, undefined) {
  22.  
  23.     'use strict';
  24.  
  25.     var defaults = {
  26.         videoMaxWidth: '855px',
  27.         youtubePlayerParams: false,
  28.         vimeoPlayerParams: false,
  29.         dailymotionPlayerParams: false,
  30.         vkPlayerParams: false,
  31.         videojs: false,
  32.         videojsOptions: {}
  33.     };
  34.  
  35.     var Video = function(element) {
  36.  
  37.         this.core = $(element).data('lightGallery');
  38.  
  39.         this.$el = $(element);
  40.         this.core.s = $.extend({}, defaults, this.core.s);
  41.         this.videoLoaded = false;
  42.  
  43.         this.init();
  44.  
  45.         return this;
  46.     };
  47.  
  48.     Video.prototype.init = function() {
  49.         var _this = this;
  50.  
  51.         // Event triggered when video url found without poster
  52.         _this.core.$el.on('hasVideo.lg.tm', function(event, index, src, html) {
  53.             _this.core.$slide.eq(index).find('.lg-video').append(_this.loadVideo(src, 'lg-object', true, index, html));
  54.             if (html) {
  55.                 if (_this.core.s.videojs) {
  56.                     try {
  57.                         videojs(_this.core.$slide.eq(index).find('.lg-html5').get(0), _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.eq(index).find('.lg-html5').get(0).play();
  67.                 }
  68.             }
  69.         });
  70.  
  71.         // Set max width for video
  72.         _this.core.$el.on('onAferAppendSlide.lg.tm', function(event, index) {
  73.             _this.core.$slide.eq(index).find('.lg-video-cont').css('max-width', _this.core.s.videoMaxWidth);
  74.             _this.videoLoaded = true;
  75.         });
  76.  
  77.         var loadOnClick = function($el) {
  78.             // check slide has poster
  79.             if ($el.find('.lg-object').hasClass('lg-has-poster') && $el.find('.lg-object').is(':visible')) {
  80.  
  81.                 // check already video element present
  82.                 if (!$el.hasClass('lg-has-video')) {
  83.  
  84.                     $el.addClass('lg-video-playing lg-has-video');
  85.  
  86.                     var _src;
  87.                     var _html;
  88.                     var _loadVideo = function(_src, _html) {
  89.  
  90.                         $el.find('.lg-video').append(_this.loadVideo(_src, '', false, _this.core.index, _html));
  91.  
  92.                         if (_html) {
  93.                             if (_this.core.s.videojs) {
  94.                                 try {
  95.                                     videojs(_this.core.$slide.eq(_this.core.index).find('.lg-html5').get(0), _this.core.s.videojsOptions, function() {
  96.                                         this.play();
  97.                                     });
  98.                                 } catch (e) {
  99.                                     console.error('Make sure you have included videojs');
  100.                                 }
  101.                             } else {
  102.                                 _this.core.$slide.eq(_this.core.index).find('.lg-html5').get(0).play();
  103.                             }
  104.                         }
  105.  
  106.                     };
  107.  
  108.                     if (_this.core.s.dynamic) {
  109.  
  110.                         _src = _this.core.s.dynamicEl[_this.core.index].src;
  111.                         _html = _this.core.s.dynamicEl[_this.core.index].html;
  112.  
  113.                         _loadVideo(_src, _html);
  114.  
  115.                     } else {
  116.  
  117.                         _src = _this.core.$items.eq(_this.core.index).attr('href') || _this.core.$items.eq(_this.core.index).attr('data-src');
  118.                         _html = _this.core.$items.eq(_this.core.index).attr('data-html');
  119.  
  120.                         _loadVideo(_src, _html);
  121.  
  122.                     }
  123.  
  124.                     var $tempImg = $el.find('.lg-object');
  125.                     $el.find('.lg-video').append($tempImg);
  126.  
  127.                     // @todo loading icon for html5 videos also
  128.                     // for showing the loading indicator while loading video
  129.                     if (!$el.find('.lg-video-object').hasClass('lg-html5')) {
  130.                         $el.removeClass('lg-complete');
  131.                         $el.find('.lg-video-object').on('load.lg error.lg', function() {
  132.                             $el.addClass('lg-complete');
  133.                         });
  134.                     }
  135.  
  136.                 } else {
  137.  
  138.                     var youtubePlayer = $el.find('.lg-youtube').get(0);
  139.                     var vimeoPlayer = $el.find('.lg-vimeo').get(0);
  140.                     var dailymotionPlayer = $el.find('.lg-dailymotion').get(0);
  141.                     var html5Player = $el.find('.lg-html5').get(0);
  142.                     if (youtubePlayer) {
  143.                         youtubePlayer.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
  144.                     } else if (vimeoPlayer) {
  145.                         try {
  146.                             $f(vimeoPlayer).api('play');
  147.                         } catch (e) {
  148.                             console.error('Make sure you have included froogaloop2 js');
  149.                         }
  150.                     } else if (dailymotionPlayer) {
  151.                         dailymotionPlayer.contentWindow.postMessage('play', '*');
  152.  
  153.                     } else if (html5Player) {
  154.                         if (_this.core.s.videojs) {
  155.                             try {
  156.                                 videojs(html5Player).play();
  157.                             } catch (e) {
  158.                                 console.error('Make sure you have included videojs');
  159.                             }
  160.                         } else {
  161.                             html5Player.play();
  162.                         }
  163.                     }
  164.  
  165.                     $el.addClass('lg-video-playing');
  166.  
  167.                 }
  168.             }
  169.         };
  170.  
  171.         if (_this.core.doCss() && _this.core.$items.length > 1 && ((_this.core.s.enableSwipe && _this.core.isTouch) || (_this.core.s.enableDrag && !_this.core.isTouch))) {
  172.             _this.core.$el.on('onSlideClick.lg.tm', function() {
  173.                 var $el = _this.core.$slide.eq(_this.core.index);
  174.                 loadOnClick($el);
  175.             });
  176.         } else {
  177.  
  178.             // For IE 9 and bellow
  179.             _this.core.$slide.on('click.lg', function() {
  180.                 loadOnClick($(this));
  181.             });
  182.         }
  183.  
  184.         _this.core.$el.on('onBeforeSlide.lg.tm', function(event, prevIndex, index) {
  185.  
  186.             var $videoSlide = _this.core.$slide.eq(prevIndex);
  187.             var youtubePlayer = $videoSlide.find('.lg-youtube').get(0);
  188.             var vimeoPlayer = $videoSlide.find('.lg-vimeo').get(0);
  189.             var dailymotionPlayer = $videoSlide.find('.lg-dailymotion').get(0);
  190.             var vkPlayer = $videoSlide.find('.lg-vk').get(0);
  191.             var html5Player = $videoSlide.find('.lg-html5').get(0);
  192.             if (youtubePlayer) {
  193.                 youtubePlayer.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
  194.             } else if (vimeoPlayer) {
  195.                 try {
  196.                     $f(vimeoPlayer).api('pause');
  197.                 } catch (e) {
  198.                     console.error('Make sure you have included froogaloop2 js');
  199.                 }
  200.             } else if (dailymotionPlayer) {
  201.                 dailymotionPlayer.contentWindow.postMessage('pause', '*');
  202.  
  203.             } else if (html5Player) {
  204.                 if (_this.core.s.videojs) {
  205.                     try {
  206.                         videojs(html5Player).pause();
  207.                     } catch (e) {
  208.                         console.error('Make sure you have included videojs');
  209.                     }
  210.                 } else {
  211.                     html5Player.pause();
  212.                 }
  213.             } if (vkPlayer) {
  214.                 $(vkPlayer).attr('src', $(vkPlayer).attr('src').replace('&autoplay', '&noplay'));
  215.             }
  216.  
  217.             var _src;
  218.             if (_this.core.s.dynamic) {
  219.                 _src = _this.core.s.dynamicEl[index].src;
  220.             } else {
  221.                 _src = _this.core.$items.eq(index).attr('href') || _this.core.$items.eq(index).attr('data-src');
  222.  
  223.             }
  224.  
  225.             var _isVideo = _this.core.isVideo(_src, index) || {};
  226.             if (_isVideo.youtube || _isVideo.vimeo || _isVideo.dailymotion || _isVideo.vk) {
  227.                 _this.core.$outer.addClass('lg-hide-download');
  228.             }
  229.  
  230.             //$videoSlide.addClass('lg-complete');
  231.  
  232.         });
  233.  
  234.         _this.core.$el.on('onAfterSlide.lg.tm', function(event, prevIndex) {
  235.             _this.core.$slide.eq(prevIndex).removeClass('lg-video-playing');
  236.         });
  237.     };
  238.  
  239.     Video.prototype.loadVideo = function(src, addClass, noposter, index, html) {
  240.         var video = '';
  241.         var autoplay = 1;
  242.         var a = '';
  243.         var isVideo = this.core.isVideo(src, index) || {};
  244.  
  245.         // Enable autoplay for first video if poster doesn't exist
  246.         if (noposter) {
  247.             if (this.videoLoaded) {
  248.                 autoplay = 0;
  249.             } else {
  250.                 autoplay = 1;
  251.             }
  252.         }
  253.  
  254.         if (isVideo.youtube) {
  255.  
  256.             a = '?wmode=opaque&autoplay=' + autoplay + '&enablejsapi=1';
  257.             if (this.core.s.youtubePlayerParams) {
  258.                 a = a + '&' + $.param(this.core.s.youtubePlayerParams);
  259.             }
  260.  
  261.             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>';
  262.  
  263.         } else if (isVideo.vimeo) {
  264.  
  265.             a = '?autoplay=' + autoplay + '&api=1';
  266.             if (this.core.s.vimeoPlayerParams) {
  267.                 a = a + '&' + $.param(this.core.s.vimeoPlayerParams);
  268.             }
  269.  
  270.             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>';
  271.  
  272.         } else if (isVideo.dailymotion) {
  273.  
  274.             a = '?wmode=opaque&autoplay=' + autoplay + '&api=postMessage';
  275.             if (this.core.s.dailymotionPlayerParams) {
  276.                 a = a + '&' + $.param(this.core.s.dailymotionPlayerParams);
  277.             }
  278.  
  279.             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>';
  280.  
  281.         } else if (isVideo.html5) {
  282.             var fL = html.substring(0, 1);
  283.             if (fL === '.' || fL === '#') {
  284.                 html = $(html).html();
  285.             }
  286.  
  287.             video = html;
  288.  
  289.         } else if (isVideo.vk) {
  290.  
  291.             a = '&autoplay=' + autoplay;
  292.             if (this.core.s.vkPlayerParams) {
  293.                 a = a + '&' + $.param(this.core.s.vkPlayerParams);
  294.             }
  295.  
  296.             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>';
  297.  
  298.         }
  299.  
  300.         return video;
  301.     };
  302.  
  303.     Video.prototype.destroy = function() {
  304.         this.videoLoaded = false;
  305.     };
  306.  
  307.     $.fn.lightGallery.modules.video = Video;
  308.  
  309. })(jQuery, window, document);
  310.  
  311.  
  312. }));