1/*! 2 * Name : Video Background Extension for Jarallax 3 * Version : 1.0.1 4 * Author : nK <https://nkdev.info> 5 * GitHub : https://github.com/nk-o/jarallax 6 */ 7/******/ (function(modules) { // webpackBootstrap 8/******/ // The module cache 9/******/ var installedModules = {}; 10/******/ 11/******/ // The require function 12/******/ function __webpack_require__(moduleId) { 13/******/ 14/******/ // Check if module is in cache 15/******/ if(installedModules[moduleId]) { 16/******/ return installedModules[moduleId].exports; 17/******/ } 18/******/ // Create a new module (and put it into the cache) 19/******/ var module = installedModules[moduleId] = { 20/******/ i: moduleId, 21/******/ l: false, 22/******/ exports: {} 23/******/ }; 24/******/ 25/******/ // Execute the module function 26/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 27/******/ 28/******/ // Flag the module as loaded 29/******/ module.l = true; 30/******/ 31/******/ // Return the exports of the module 32/******/ return module.exports; 33/******/ } 34/******/ 35/******/ 36/******/ // expose the modules object (__webpack_modules__) 37/******/ __webpack_require__.m = modules; 38/******/ 39/******/ // expose the module cache 40/******/ __webpack_require__.c = installedModules; 41/******/ 42/******/ // define getter function for harmony exports 43/******/ __webpack_require__.d = function(exports, name, getter) { 44/******/ if(!__webpack_require__.o(exports, name)) { 45/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); 46/******/ } 47/******/ }; 48/******/ 49/******/ // define __esModule on exports 50/******/ __webpack_require__.r = function(exports) { 51/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 52/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 53/******/ } 54/******/ Object.defineProperty(exports, '__esModule', { value: true }); 55/******/ }; 56/******/ 57/******/ // create a fake namespace object 58/******/ // mode & 1: value is a module id, require it 59/******/ // mode & 2: merge all properties of value into the ns 60/******/ // mode & 4: return value when already ns object 61/******/ // mode & 8|1: behave like require 62/******/ __webpack_require__.t = function(value, mode) { 63/******/ if(mode & 1) value = __webpack_require__(value); 64/******/ if(mode & 8) return value; 65/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; 66/******/ var ns = Object.create(null); 67/******/ __webpack_require__.r(ns); 68/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); 69/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); 70/******/ return ns; 71/******/ }; 72/******/ 73/******/ // getDefaultExport function for compatibility with non-harmony modules 74/******/ __webpack_require__.n = function(module) { 75/******/ var getter = module && module.__esModule ? 76/******/ function getDefault() { return module['default']; } : 77/******/ function getModuleExports() { return module; }; 78/******/ __webpack_require__.d(getter, 'a', getter); 79/******/ return getter; 80/******/ }; 81/******/ 82/******/ // Object.prototype.hasOwnProperty.call 83/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 84/******/ 85/******/ // __webpack_public_path__ 86/******/ __webpack_require__.p = ""; 87/******/ 88/******/ 89/******/ // Load entry module and return exports 90/******/ return __webpack_require__(__webpack_require__.s = 6); 91/******/ }) 92/************************************************************************/ 93/******/ ([ 94/* 0 */, 95/* 1 */, 96/* 2 */ 97/***/ (function(module, exports, __webpack_require__) { 98 99"use strict"; 100 101 102module.exports = function (callback) { 103 104 if (document.readyState === 'complete' || document.readyState === 'interactive') { 105 // Already ready or interactive, execute callback 106 callback.call(); 107 } else if (document.attachEvent) { 108 // Old browsers 109 document.attachEvent('onreadystatechange', function () { 110 if (document.readyState === 'interactive') callback.call(); 111 }); 112 } else if (document.addEventListener) { 113 // Modern browsers 114 document.addEventListener('DOMContentLoaded', callback); 115 } 116}; 117 118/***/ }), 119/* 3 */, 120/* 4 */ 121/***/ (function(module, exports, __webpack_require__) { 122 123"use strict"; 124/* WEBPACK VAR INJECTION */(function(global) { 125 126var win; 127 128if (typeof window !== "undefined") { 129 win = window; 130} else if (typeof global !== "undefined") { 131 win = global; 132} else if (typeof self !== "undefined") { 133 win = self; 134} else { 135 win = {}; 136} 137 138module.exports = win; 139/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(5))) 140 141/***/ }), 142/* 5 */ 143/***/ (function(module, exports, __webpack_require__) { 144 145"use strict"; 146 147 148var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; 149 150var g; 151 152// This works in non-strict mode 153g = function () { 154 return this; 155}(); 156 157try { 158 // This works if eval is allowed (see CSP) 159 g = g || Function("return this")() || (1, eval)("this"); 160} catch (e) { 161 // This works if the window reference is available 162 if ((typeof window === "undefined" ? "undefined" : _typeof(window)) === "object") g = window; 163} 164 165// g can still be undefined, but nothing to do about it... 166// We return undefined, instead of nothing here, so it's 167// easier to handle this case. if(!global) { ...} 168 169module.exports = g; 170 171/***/ }), 172/* 6 */ 173/***/ (function(module, exports, __webpack_require__) { 174 175module.exports = __webpack_require__(7); 176 177 178/***/ }), 179/* 7 */ 180/***/ (function(module, exports, __webpack_require__) { 181 182"use strict"; 183 184 185var _videoWorker = __webpack_require__(8); 186 187var _videoWorker2 = _interopRequireDefault(_videoWorker); 188 189var _global = __webpack_require__(4); 190 191var _global2 = _interopRequireDefault(_global); 192 193var _liteReady = __webpack_require__(2); 194 195var _liteReady2 = _interopRequireDefault(_liteReady); 196 197var _jarallaxVideo = __webpack_require__(10); 198 199var _jarallaxVideo2 = _interopRequireDefault(_jarallaxVideo); 200 201function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 202 203// add video worker globally to fallback jarallax < 1.10 versions 204_global2.default.VideoWorker = _global2.default.VideoWorker || _videoWorker2.default; 205 206(0, _jarallaxVideo2.default)(); 207 208// data-jarallax-video initialization 209(0, _liteReady2.default)(function () { 210 if (typeof jarallax !== 'undefined') { 211 jarallax(document.querySelectorAll('[data-jarallax-video]')); 212 } 213}); 214 215/***/ }), 216/* 8 */ 217/***/ (function(module, exports, __webpack_require__) { 218 219"use strict"; 220 221 222module.exports = __webpack_require__(9); 223 224/***/ }), 225/* 9 */ 226/***/ (function(module, exports, __webpack_require__) { 227 228"use strict"; 229 230 231Object.defineProperty(exports, "__esModule", { 232 value: true 233}); 234 235var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; 236 237var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 238 239function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 240 241// Deferred 242// thanks http://stackoverflow.com/questions/18096715/implement-deferred-object-without-using-jquery 243function Deferred() { 244 this._done = []; 245 this._fail = []; 246} 247Deferred.prototype = {
248 execute: function execute(list, args) { 249 var i = list.length; 250 args = Array.prototype.slice.call(args); 251 while (i--) { 252 list[i].apply(null, args); 253 } 254 }, 255 resolve: function resolve() { 256 this.execute(this._done, arguments); 257 }, 258 reject: function reject() { 259 this.execute(this._fail, arguments); 260 }, 261 done: function done(callback) { 262 this._done.push(callback); 263 }, 264 fail: function fail(callback) { 265 this._fail.push(callback); 266 } 267}; 268 269var ID = 0; 270var YoutubeAPIadded = 0; 271var VimeoAPIadded = 0; 272var loadingYoutubePlayer = 0; 273var loadingVimeoPlayer = 0; 274var loadingYoutubeDefer = new Deferred(); 275var loadingVimeoDefer = new Deferred(); 276 277var VideoWorker = function () { 278 function VideoWorker(url, options) { 279 _classCallCheck(this, VideoWorker); 280 281 var self = this; 282 283 self.url = url; 284 285 self.options_default = { 286 autoplay: false, 287 loop: false, 288 mute: false, 289 volume: 100, 290 showContols: true, 291 292 // start / end video time in seconds 293 startTime: 0, 294 endTime: 0 295 }; 296 297 self.options = self.extend({}, self.options_default, options); 298 299 // check URL 300 self.videoID = self.parseURL(url); 301 302 // init 303 if (self.videoID) { 304 self.ID = ID++; 305 self.loadAPI(); 306 self.init(); 307 } 308 } 309 310 // Extend like jQuery.extend 311 312 313 _createClass(VideoWorker, [{ 314 key: 'extend', 315 value: function extend(out) { 316 var _arguments = arguments; 317 318 out = out || {}; 319 Object.keys(arguments).forEach(function (i) { 320 if (!_arguments[i]) { 321 return; 322 } 323 Object.keys(_arguments[i]).forEach(function (key) { 324 out[key] = _arguments[i][key]; 325 }); 326 }); 327 return out; 328 } 329 }, { 330 key: 'parseURL', 331 value: function parseURL(url) { 332 // parse youtube ID 333 function getYoutubeID(ytUrl) { 334 // eslint-disable-next-line no-useless-escape 335 var regExp = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/; 336 var match = ytUrl.match(regExp); 337 return match && match[1].length === 11 ? match[1] : false; 338 } 339 340 // parse vimeo ID 341 function getVimeoID(vmUrl) { 342 // eslint-disable-next-line no-useless-escape 343 var regExp = /https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/|)(\d+)(?:$|\/|\?)/; 344 var match = vmUrl.match(regExp); 345 return match && match[3] ? match[3] : false; 346 } 347 348 // parse local string 349 function getLocalVideos(locUrl) { 350 // eslint-disable-next-line no-useless-escape 351 var videoFormats = locUrl.split(/,(?=mp4\:|webm\:|ogv\:|ogg\:)/); 352 var result = {}; 353 var ready = 0; 354 videoFormats.forEach(function (val) { 355 // eslint-disable-next-line no-useless-escape 356 var match = val.match(/^(mp4|webm|ogv|ogg)\:(.*)/); 357 if (match && match[1] && match[2]) { 358 // eslint-disable-next-line prefer-destructuring 359 result[match[1] === 'ogv' ? 'ogg' : match[1]] = match[2]; 360 ready = 1; 361 } 362 }); 363 return ready ? result : false;
364 } 365 366 var Youtube = getYoutubeID(url); 367 var Vimeo = getVimeoID(url); 368 var Local = getLocalVideos(url); 369 370 if (Youtube) { 371 this.type = 'youtube'; 372 return Youtube; 373 } else if (Vimeo) { 374 this.type = 'vimeo'; 375 return Vimeo; 376 } else if (Local) { 377 this.type = 'local'; 378 return Local; 379 } 380 381 return false; 382 } 383 }, { 384 key: 'isValid', 385 value: function isValid() { 386 return !!this.videoID; 387 } 388 389 // events 390 391 }, { 392 key: 'on', 393 value: function on(name, callback) { 394 this.userEventsList = this.userEventsList || []; 395 396 // add new callback in events list 397 (this.userEventsList[name] || (this.userEventsList[name] = [])).push(callback); 398 } 399 }, { 400 key: 'off', 401 value: function off(name, callback) { 402 var _this = this; 403 404 if (!this.userEventsList || !this.userEventsList[name]) { 405 return; 406 } 407 408 if (!callback) { 409 delete this.userEventsList[name]; 410 } else { 411 this.userEventsList[name].forEach(function (val, key) { 412 if (val === callback) { 413 _this.userEventsList[name][key] = false; 414 } 415 }); 416 } 417 } 418 }, { 419 key: 'fire', 420 value: function fire(name) { 421 var _this2 = this; 422 423 var args = [].slice.call(arguments, 1); 424 if (this.userEventsList && typeof this.userEventsList[name] !== 'undefined') { 425 this.userEventsList[name].forEach(function (val) { 426 // call with all arguments 427 if (val) { 428 val.apply(_this2, args); 429 } 430 }); 431 } 432 } 433 }, { 434 key: 'play', 435 value: function play(start) { 436 var self = this; 437 if (!self.player) { 438 return; 439 } 440 441 if (self.type === 'youtube' && self.player.playVideo) { 442 if (typeof start !== 'undefined') { 443 self.player.seekTo(start || 0); 444 } 445 if (YT.PlayerState.PLAYING !== self.player.getPlayerState()) { 446 self.player.playVideo(); 447 } 448 } 449 450 if (self.type === 'vimeo') { 451 if (typeof start !== 'undefined') { 452 self.player.setCurrentTime(start); 453 } 454 self.player.getPaused().then(function (paused) { 455 if (paused) { 456 self.player.play(); 457 } 458 }); 459 } 460 461 if (self.type === 'local') { 462 if (typeof start !== 'undefined') { 463 self.player.currentTime = start; 464 } 465 if (self.player.paused) { 466 self.player.play(); 467 } 468 } 469 } 470 }, { 471 key: 'pause', 472 value: function pause() { 473 var self = this; 474 if (!self.player) { 475 return; 476 } 477 478 if (self.type === 'youtube' && self.player.pauseVideo) { 479 if (YT.PlayerState.PLAYING === self.player.getPlayerState()) { 480 self.player.pauseVideo(); 481 } 482 } 483 484 if (self.type === 'vimeo') { 485 self.player.getPaused().then(function (paused) { 486 if (!paused) { 487 self.player.pause(); 488 } 489 }); 490 } 491 492 if (self.type === 'local') { 493 if (!self.player.paused) { 494 self.player.pause(); 495 } 496 } 497 } 498 }, { 499 key: 'mute', 500 value: function mute() { 501 var self = this; 502 if (!self.player) { 503 return; 504 } 505 506 if (self.type === 'youtube' && self.player.mute) { 507 self.player.mute(); 508 } 509 510 if (self.type === 'vimeo' && self.player.setVolume) { 511 self.player.setVolume(0); 512 } 513 514 if (self.type === 'local') { 515 self.$video.muted = true; 516 } 517 } 518 }, {
519 key: 'unmute', 520 value: function unmute() { 521 var self = this; 522 if (!self.player) { 523 return; 524 } 525 526 if (self.type === 'youtube' && self.player.mute) { 527 self.player.unMute(); 528 } 529 530 if (self.type === 'vimeo' && self.player.setVolume) { 531 self.player.setVolume(self.options.volume); 532 } 533 534 if (self.type === 'local') { 535 self.$video.muted = false; 536 } 537 } 538 }, { 539 key: 'setVolume', 540 value: function setVolume() { 541 var volume = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; 542 543 var self = this; 544 if (!self.player || !volume) { 545 return; 546 } 547 548 if (self.type === 'youtube' && self.player.setVolume) { 549 self.player.setVolume(volume); 550 } 551 552 if (self.type === 'vimeo' && self.player.setVolume) { 553 self.player.setVolume(volume); 554 } 555 556 if (self.type === 'local') { 557 self.$video.volume = volume / 100; 558 } 559 } 560 }, { 561 key: 'getVolume', 562 value: function getVolume(callback) { 563 var self = this; 564 if (!self.player) { 565 callback(false); 566 return; 567 } 568 569 if (self.type === 'youtube' && self.player.getVolume) { 570 callback(self.player.getVolume()); 571 } 572 573 if (self.type === 'vimeo' && self.player.getVolume) { 574 self.player.getVolume().then(function (volume) { 575 callback(volume); 576 }); 577 } 578 579 if (self.type === 'local') { 580 callback(self.$video.volume * 100); 581 } 582 } 583 }, { 584 key: 'getMuted', 585 value: function getMuted(callback) { 586 var self = this; 587 if (!self.player) { 588 callback(null); 589 return; 590 } 591 592 if (self.type === 'youtube' && self.player.isMuted) { 593 callback(self.player.isMuted()); 594 } 595 596 if (self.type === 'vimeo' && self.player.getVolume) { 597 self.player.getVolume().then(function (volume) { 598 callback(!!volume); 599 }); 600 } 601 602 if (self.type === 'local') { 603 callback(self.$video.muted); 604 } 605 } 606 }, { 607 key: 'getImageURL', 608 value: function getImageURL(callback) { 609 var self = this; 610 611 if (self.videoImage) { 612 callback(self.videoImage); 613 return; 614 } 615 616 if (self.type === 'youtube') { 617 var availableSizes = ['maxresdefault', 'sddefault', 'hqdefault', '0']; 618 var step = 0; 619 620 var tempImg = new Image(); 621 tempImg.onload = function () { 622 // if no thumbnail, youtube add their own image with width = 120px 623 if ((this.naturalWidth || this.width) !== 120 || step === availableSizes.length - 1) { 624 // ok 625 self.videoImage = 'https://img.youtube.com/vi/' + self.videoID + '/' + availableSizes[step] + '.jpg'; 626 callback(self.videoImage); 627 } else { 628 // try another size 629 step++; 630 this.src = 'https://img.youtube.com/vi/' + self.videoID + '/' + availableSizes[step] + '.jpg'; 631 } 632 }; 633 tempImg.src = 'https://img.youtube.com/vi/' + self.videoID + '/' + availableSizes[step] + '.jpg'; 634 } 635 636 if (self.type === 'vimeo') { 637 var request = new XMLHttpRequest(); 638 request.open('GET', 'https://vimeo.com/api/v2/video/' + self.videoID + '.json', true); 639 request.onreadystatechange = function () { 640 if (this.readyState === 4) { 641 if (this.status >= 200 && this.status < 400) { 642 // Success! 643 var response = JSON.parse(this.responseText); 644 self.videoImage = response[0].thumbnail_large; 645 callback(self.videoImage); 646 } else { 647 // Error :( 648 } 649 } 650 }; 651 request.send(); 652 request = null; 653 } 654 } 655 656 // fallback to the old version. 657 658 }, {
659 key: 'getIframe', 660 value: function getIframe(callback) { 661 this.getVideo(callback); 662 } 663 }, { 664 key: 'getVideo', 665 value: function getVideo(callback) { 666 var self = this; 667 668 // return generated video block 669 if (self.$video) { 670 callback(self.$video); 671 return; 672 } 673 674 // generate new video block 675 self.onAPIready(function () { 676 var hiddenDiv = void 0; 677 if (!self.$video) { 678 hiddenDiv = document.createElement('div'); 679 hiddenDiv.style.display = 'none'; 680 } 681 682 // Youtube 683 if (self.type === 'youtube') { 684 self.playerOptions = {}; 685 self.playerOptions.videoId = self.videoID; 686 self.playerOptions.playerVars = { 687 autohide: 1, 688 rel: 0, 689 autoplay: 0, 690 // autoplay enable on mobile devices 691 playsinline: 1 692 //,origin:'http://sample04.tloghost.kr/' 693 }; 694 695 // hide controls 696 if (!self.options.showContols) { 697 self.playerOptions.playerVars.iv_load_policy = 3; 698 self.playerOptions.playerVars.modestbranding = 1; 699 self.playerOptions.playerVars.controls = 0; 700 self.playerOptions.playerVars.showinfo = 0; 701 self.playerOptions.playerVars.disablekb = 1; 702 } 703 704 // events 705 var ytStarted = void 0; 706 var ytProgressInterval = void 0; 707 self.playerOptions.events = { 708 onReady: function onReady(e) { 709 // mute 710 if (self.options.mute) { 711 e.target.mute(); 712 } else if (self.options.volume) { 713 e.target.setVolume(self.options.volume); 714 } 715 716 // autoplay 717 if (self.options.autoplay) { 718 self.play(self.options.startTime); 719 } 720 self.fire('ready', e); 721 722 // For seamless loops, set the endTime to 0.1 seconds less than the video's duration 723 // https://github.com/nk-o/video-worker/issues/2 724 if (self.options.loop && !self.options.endTime) { 725 var secondsOffset = 0.1; 726 self.options.endTime = self.player.getDuration() - secondsOffset; 727 } 728 729 // volumechange 730 setInterval(function () { 731 self.getVolume(function (volume) { 732 if (self.options.volume !== volume) { 733 self.options.volume = volume; 734 self.fire('volumechange', e); 735 } 736 }); 737 }, 150); 738 }, 739 onStateChange: function onStateChange(e) { 740 // loop 741 if (self.options.loop && e.data === YT.PlayerState.ENDED) { 742 self.play(self.options.startTime); 743 } 744 if (!ytStarted && e.data === YT.PlayerState.PLAYING) { 745 ytStarted = 1; 746 self.fire('started', e); 747 } 748 if (e.data === YT.PlayerState.PLAYING) { 749 self.fire('play', e); 750 } 751 if (e.data === YT.PlayerState.PAUSED) { 752 self.fire('pause', e); 753 } 754 if (e.data === YT.PlayerState.ENDED) { 755 self.fire('ended', e); 756 } 757 758 // progress check 759 if (e.data === YT.PlayerState.PLAYING) { 760 ytProgressInterval = setInterval(function () { 761 self.fire('timeupdate', e); 762 763 // check for end of video and play again or stop 764 if (self.options.endTime && self.player.getCurrentTime() >= self.options.endTime) { 765 if (self.options.loop) { 766 self.play(self.options.startTime); 767 } else { 768 self.pause(); 769 } 770 } 771 }, 150); 772 } else { 773 clearInterval(ytProgressInterval); 774 } 775 } 776 }; 777 778 var firstInit = !self.$video; 779 if (firstInit) { 780 var div = document.createElement('div'); 781 div.setAttribute('id', self.playerID); 782 hiddenDiv.appendChild(div); 783 document.body.appendChild(hiddenDiv); 784 } 785 self.player = self.player || new window.YT.Player(self.playerID, self.playerOptions); 786 if (firstInit) { 787 self.$video = document.getElementById(self.playerID); 788 789 // get video width and height 790 self.videoWidth = parseInt(self.$video.getAttribute('width'), 10) || 1280; 791 self.videoHeight = parseInt(self.$video.getAttribute('height'), 10) || 720; 792 } 793 } 794 795 // Vimeo 796 if (self.type === 'vimeo') { 797 self.playerOptions = { 798 id: self.videoID, 799 autopause: 0, 800 transparent: 0, 801 autoplay: self.options.autoplay ? 1 : 0, 802 loop: self.options.loop ? 1 : 0, 803 muted: self.options.mute ? 1 : 0 804 }; 805 806 if (self.options.volume) { 807 self.playerOptions.volume = self.options.volume; 808 } 809 810 // hide controls 811 if (!self.options.showContols) { 812 self.playerOptions.badge = 0; 813 self.playerOptions.byline = 0; 814 self.playerOptions.portrait = 0; 815 self.playerOptions.title = 0; 816 } 817 818 if (!self.$video) { 819 var playerOptionsString = '';
820 Object.keys(self.playerOptions).forEach(function (key) { 821 if (playerOptionsString !== '') { 822 playerOptionsString += '&'; 823 } 824 playerOptionsString += key + '=' + encodeURIComponent(self.playerOptions[key]); 825 }); 826 827 // we need to create iframe manually because when we create it using API 828 // js events won't triggers after iframe moved to another place 829 self.$video = document.createElement('iframe'); 830 self.$video.setAttribute('id', self.playerID); 831 self.$video.setAttribute('src', 'https://player.vimeo.com/video/' + self.videoID + '?' + playerOptionsString); 832 self.$video.setAttribute('frameborder', '0'); 833 self.$video.setAttribute('mozallowfullscreen', ''); 834 self.$video.setAttribute('allowfullscreen', ''); 835 836 hiddenDiv.appendChild(self.$video); 837 document.body.appendChild(hiddenDiv); 838 } 839 self.player = self.player || new Vimeo.Player(self.$video, self.playerOptions); 840 841 // set current time for autoplay 842 if (self.options.startTime && self.options.autoplay) { 843 self.player.setCurrentTime(self.options.startTime); 844 } 845 846 // get video width and height 847 self.player.getVideoWidth().then(function (width) { 848 self.videoWidth = width || 1280; 849 }); 850 self.player.getVideoHeight().then(function (height) { 851 self.videoHeight = height || 720; 852 }); 853 854 // events 855 var vmStarted = void 0; 856 self.player.on('timeupdate', function (e) { 857 if (!vmStarted) { 858 self.fire('started', e); 859 vmStarted = 1; 860 } 861 862 self.fire('timeupdate', e); 863 864 // check for end of video and play again or stop 865 if (self.options.endTime) { 866 if (self.options.endTime && e.seconds >= self.options.endTime) { 867 if (self.options.loop) { 868 self.play(self.options.startTime); 869 } else { 870 self.pause(); 871 } 872 } 873 } 874 }); 875 self.player.on('play', function (e) { 876 self.fire('play', e); 877 878 // check for the start time and start with it 879 if (self.options.startTime && e.seconds === 0) { 880 self.play(self.options.startTime); 881 } 882 }); 883 self.player.on('pause', function (e) { 884 self.fire('pause', e); 885 }); 886 self.player.on('ended', function (e) { 887 self.fire('ended', e); 888 }); 889 self.player.on('loaded', function (e) { 890 self.fire('ready', e); 891 }); 892 self.player.on('volumechange', function (e) { 893 self.fire('volumechange', e); 894 }); 895 } 896 897 // Local 898 function addSourceToLocal(element, src, type) { 899 var source = document.createElement('source'); 900 source.src = src; 901 source.type = type; 902 element.appendChild(source); 903 } 904 if (self.type === 'local') { 905 if (!self.$video) { 906 self.$video = document.createElement('video'); 907 908 // show controls 909 if (self.options.showContols) { 910 self.$video.controls = true; 911 } 912 913 // mute 914 if (self.options.mute) { 915 self.$video.muted = true; 916 } else if (self.$video.volume) { 917 self.$video.volume = self.options.volume / 100; 918 } 919 920 // loop 921 if (self.options.loop) { 922 self.$video.loop = true; 923 } 924 925 // autoplay enable on mobile devices 926 self.$video.setAttribute('playsinline', ''); 927 self.$video.setAttribute('webkit-playsinline', ''); 928 929 self.$video.setAttribute('id', self.playerID); 930 hiddenDiv.appendChild(self.$video); 931 document.body.appendChild(hiddenDiv); 932
933 Object.keys(self.videoID).forEach(function (key) { 934 addSourceToLocal(self.$video, self.videoID[key], 'video/' + key); 935 }); 936 } 937 938 self.player = self.player || self.$video; 939 940 var locStarted = void 0; 941 self.player.addEventListener('playing', function (e) { 942 if (!locStarted) { 943 self.fire('started', e); 944 } 945 locStarted = 1; 946 }); 947 self.player.addEventListener('timeupdate', function (e) { 948 self.fire('timeupdate', e); 949 950 // check for end of video and play again or stop 951 if (self.options.endTime) { 952 if (self.options.endTime && this.currentTime >= self.options.endTime) { 953 if (self.options.loop) { 954 self.play(self.options.startTime); 955 } else { 956 self.pause(); 957 } 958 } 959 } 960 }); 961 self.player.addEventListener('play', function (e) { 962 self.fire('play', e); 963 }); 964 self.player.addEventListener('pause', function (e) { 965 self.fire('pause', e); 966 }); 967 self.player.addEventListener('ended', function (e) { 968 self.fire('ended', e); 969 }); 970 self.player.addEventListener('loadedmetadata', function () { 971 // get video width and height 972 self.videoWidth = this.videoWidth || 1280; 973 self.videoHeight = this.videoHeight || 720; 974 975 self.fire('ready'); 976 977 // autoplay 978 if (self.options.autoplay) { 979 self.play(self.options.startTime); 980 } 981 }); 982 self.player.addEventListener('volumechange', function (e) { 983 self.getVolume(function (volume) { 984 self.options.volume = volume; 985 }); 986 self.fire('volumechange', e); 987 }); 988 } 989 callback(self.$video); 990 }); 991 } 992 }, { 993 key: 'init', 994 value: function init() { 995 var self = this; 996 997 self.playerID = 'VideoWorker-' + self.ID; 998 } 999 }, { 1000 key: 'loadAPI', 1001 value: function loadAPI() { 1002 var self = this; 1003 1004 if (YoutubeAPIadded && VimeoAPIadded) { 1005 return; 1006 } 1007 1008 var src = ''; 1009 1010 // load Youtube API 1011 if (self.type === 'youtube' && !YoutubeAPIadded) { 1012 YoutubeAPIadded = 1; 1013 src = 'https://www.youtube.com/iframe_api'; 1014 } 1015 1016 // load Vimeo API 1017 if (self.type === 'vimeo' && !VimeoAPIadded) { 1018 VimeoAPIadded = 1; 1019 src = 'https://player.vimeo.com/api/player.js'; 1020 } 1021 1022 if (!src) { 1023 return; 1024 } 1025 1026 // add script in head section 1027 var tag = document.createElement('script'); 1028 var head = document.getElementsByTagName('head')[0]; 1029 tag.src = src; 1030 1031 head.appendChild(tag); 1032 1033 head = null; 1034 tag = null; 1035 } 1036 }, { 1037 key: 'onAPIready', 1038 value: function onAPIready(callback) { 1039 var self = this; 1040 1041 // Youtube
1042 if (self.type === 'youtube') { 1043 // Listen for global YT player callback 1044 if ((typeof YT === 'undefined' || YT.loaded === 0) && !loadingYoutubePlayer) { 1045 // Prevents Ready event from being called twice 1046 loadingYoutubePlayer = 1; 1047 1048 // Creates deferred so, other players know when to wait. 1049 window.onYouTubeIframeAPIReady = function () { 1050 window.onYouTubeIframeAPIReady = null; 1051 loadingYoutubeDefer.resolve('done'); 1052 callback(); 1053 }; 1054 } else if ((typeof YT === 'undefined' ? 'undefined' : _typeof(YT)) === 'object' && YT.loaded === 1) { 1055 callback(); 1056 } else { 1057 loadingYoutubeDefer.done(function () { 1058 callback(); 1059 }); 1060 } 1061 } 1062 1063 // Vimeo 1064 if (self.type === 'vimeo') { 1065 if (typeof Vimeo === 'undefined' && !loadingVimeoPlayer) { 1066 loadingVimeoPlayer = 1; 1067 var vimeoInterval = setInterval(function () { 1068 if (typeof Vimeo !== 'undefined') { 1069 clearInterval(vimeoInterval); 1070 loadingVimeoDefer.resolve('done'); 1071 callback(); 1072 } 1073 }, 20); 1074 } else if (typeof Vimeo !== 'undefined') { 1075 callback(); 1076 } else { 1077 loadingVimeoDefer.done(function () { 1078 callback(); 1079 }); 1080 } 1081 } 1082 1083 // Local 1084 if (self.type === 'local') { 1085 callback(); 1086 } 1087 } 1088 }]); 1089 1090 return VideoWorker; 1091}(); 1092 1093exports.default = VideoWorker; 1094 1095/***/ }), 1096/* 10 */ 1097/***/ (function(module, exports, __webpack_require__) { 1098 1099"use strict"; 1100 1101 1102Object.defineProperty(exports, "__esModule", { 1103 value: true 1104}); 1105exports.default = jarallaxVideo; 1106 1107var _videoWorker = __webpack_require__(8); 1108 1109var _videoWorker2 = _interopRequireDefault(_videoWorker); 1110 1111var _global = __webpack_require__(4); 1112 1113var _global2 = _interopRequireDefault(_global); 1114 1115function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 1116 1117function jarallaxVideo() { 1118 var jarallax = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _global2.default.jarallax; 1119 1120 if (typeof jarallax === 'undefined') { 1121 return; 1122 } 1123 1124 var Jarallax = jarallax.constructor; 1125 1126 // append video after init Jarallax 1127 var defInit = Jarallax.prototype.init; 1128 Jarallax.prototype.init = function () { 1129 var self = this; 1130 1131 defInit.apply(self); 1132 1133 if (self.video && !self.options.disableVideo()) { 1134 self.video.getVideo(function (video) { 1135 var $parent = video.parentNode; 1136 self.css(video, { 1137 position: self.image.position, 1138 top: '0px', 1139 left: '0px', 1140 right: '0px', 1141 bottom: '0px', 1142 width: '100%', 1143 height: '100%', 1144 maxWidth: 'none', 1145 maxHeight: 'none', 1146 margin: 0, 1147 zIndex: -1 1148 }); 1149 self.$video = video; 1150 self.image.$container.appendChild(video); 1151 1152 // remove parent video element (created by VideoWorker) 1153 $parent.parentNode.removeChild($parent); 1154 }); 1155 } 1156 }; 1157 1158 // cover video 1159 var defCoverImage = Jarallax.prototype.coverImage; 1160 Jarallax.prototype.coverImage = function () { 1161 var self = this; 1162 var imageData = defCoverImage.apply(self); 1163 var node = self.image.$item ? self.image.$item.nodeName : false; 1164 1165 if (imageData && self.video && node && (node === 'IFRAME' || node === 'VIDEO')) { 1166 var h = imageData.image.height; 1167 var w = h * self.image.width / self.image.height; 1168 var ml = (imageData.container.width - w) / 2; 1169 var mt = imageData.image.marginTop; 1170 1171 if (imageData.container.width > w) { 1172 w = imageData.container.width; 1173 h = w * self.image.height / self.image.width; 1174 ml = 0; 1175 mt += (imageData.image.height - h) / 2; 1176 } 1177 1178 // add video height over than need to hide controls 1179 if (node === 'IFRAME') { 1180 h += 400; 1181 mt -= 200; 1182 } 1183 1184 self.css(self.$video, { 1185 width: w + 'px', 1186 marginLeft: ml + 'px', 1187 height: h + 'px', 1188 marginTop: mt + 'px' 1189 }); 1190 } 1191 1192 return imageData; 1193 }; 1194 1195 // init video 1196 var defInitImg = Jarallax.prototype.initImg; 1197 Jarallax.prototype.initImg = function () { 1198 var self = this; 1199 var defaultResult = defInitImg.apply(self); 1200 1201 if (!self.options.videoSrc) { 1202 self.options.videoSrc = self.$item.getAttribute('data-jarallax-video') || null; 1203 } 1204 1205 if (self.options.videoSrc) { 1206 self.defaultInitImgResult = defaultResult; 1207 return true; 1208 } 1209 1210 return defaultResult; 1211 }; 1212 1213 var defCanInitParallax = Jarallax.prototype.canInitParallax; 1214 Jarallax.prototype.canInitParallax = function () { 1215 var self = this; 1216 var defaultResult = defCanInitParallax.apply(self); 1217 1218 if (!self.options.videoSrc) { 1219 return defaultResult; 1220 } 1221 1222 var video = new _videoWorker2.default(self.options.videoSrc, { 1223 autoplay: true, 1224 loop: self.options.videoLoop, 1225 showContols: false, 1226 startTime: self.options.videoStartTime || 0, 1227 endTime: self.options.videoEndTime || 0, 1228 mute: self.options.videoVolume ? 0 : 1, 1229 volume: self.options.videoVolume || 0 1230 }); 1231 1232 if (video.isValid()) { 1233 // if parallax will not be inited, we can add thumbnail on background. 1234 if (!defaultResult) { 1235 if (!self.defaultInitImgResult) { 1236 video.getImageURL(function (url) { 1237 // save default user styles 1238 var curStyle = self.$item.getAttribute('style'); 1239 if (curStyle) { 1240 self.$item.setAttribute('data-jarallax-original-styles', curStyle); 1241 } 1242 1243 // set new background 1244 self.css(self.$item, { 1245 'background-image': 'url("' + url + '")', 1246 'background-position': 'center', 1247 'background-size': 'cover' 1248 }); 1249 }); 1250 } 1251 1252 // init video 1253 } else { 1254 video.on('ready', function () { 1255 if (self.options.videoPlayOnlyVisible) { 1256 var oldOnScroll = self.onScroll; 1257 self.onScroll = function () { 1258 oldOnScroll.apply(self); 1259 if (self.options.videoLoop || !self.options.videoLoop && !self.videoEnded) { 1260 if (self.isVisible()) { 1261 video.play(); 1262 } else { 1263 video.pause(); 1264 } 1265 } 1266 }; 1267 } else { 1268 video.play(); 1269 } 1270 }); 1271 1272 video.on('started', function () { 1273 self.image.$default_item = self.image.$item; 1274 self.image.$item = self.$video; 1275 1276 // set video width and height 1277 self.image.width = self.video.videoWidth || 1280; 1278 self.image.height = self.video.videoHeight || 720; 1279 self.coverImage(); 1280 self.clipContainer(); 1281 self.onScroll(); 1282 1283 // hide image 1284 if (self.image.$default_item) { 1285 self.image.$default_item.style.display = 'none'; 1286 } 1287 }); 1288 1289 video.on('ended', function () { 1290 self.videoEnded = true; 1291 1292 if (!self.options.videoLoop) { 1293 // show image if Loop disabled 1294 if (self.image.$default_item) { 1295 self.image.$item = self.image.$default_item; 1296 self.image.$item.style.display = 'block'; 1297 1298 // set image width and height 1299 self.coverImage(); 1300 self.clipContainer(); 1301 self.onScroll(); 1302 } 1303 } 1304 }); 1305 1306 self.video = video; 1307 1308 // set image if not exists 1309 if (!self.defaultInitImgResult) { 1310 if (video.type !== 'local') { 1311 video.getImageURL(function (url) { 1312 self.image.src = url; 1313 self.init(); 1314 }); 1315 1316 return false;
1317 } 1318 1319 // set empty image on local video if not defined 1320 self.image.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; 1321 return true; 1322 } 1323 } 1324 } 1325 1326 return defaultResult; 1327 }; 1328 1329 // Destroy video parallax 1330 var defDestroy = Jarallax.prototype.destroy; 1331 Jarallax.prototype.destroy = function () { 1332 var self = this; 1333 1334 if (self.image.$default_item) { 1335 self.image.$item = self.image.$default_item; 1336 delete self.image.$default_item; 1337 } 1338 1339 defDestroy.apply(self); 1340 }; 1341} 1342 1343/***/ }) 1344/******/ ]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.