gramps
373ebc8c93
952 days continuous production uptime, 40k+ tp/s single node. Original corpo Bitbucket history not included — clean archive commit.
1284 lines
43 KiB
JavaScript
Executable File
1284 lines
43 KiB
JavaScript
Executable File
/*!
|
|
* Name : Video Background Extension for Jarallax
|
|
* Version : 1.0.1
|
|
* Author : nK <https://nkdev.info>
|
|
* GitHub : https://github.com/nk-o/jarallax
|
|
*/
|
|
/******/ (function(modules) { // webpackBootstrap
|
|
/******/ // The module cache
|
|
/******/ var installedModules = {};
|
|
/******/
|
|
/******/ // The require function
|
|
/******/ function __webpack_require__(moduleId) {
|
|
/******/
|
|
/******/ // Check if module is in cache
|
|
/******/ if(installedModules[moduleId]) {
|
|
/******/ return installedModules[moduleId].exports;
|
|
/******/ }
|
|
/******/ // Create a new module (and put it into the cache)
|
|
/******/ var module = installedModules[moduleId] = {
|
|
/******/ i: moduleId,
|
|
/******/ l: false,
|
|
/******/ exports: {}
|
|
/******/ };
|
|
/******/
|
|
/******/ // Execute the module function
|
|
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
|
/******/
|
|
/******/ // Flag the module as loaded
|
|
/******/ module.l = true;
|
|
/******/
|
|
/******/ // Return the exports of the module
|
|
/******/ return module.exports;
|
|
/******/ }
|
|
/******/
|
|
/******/
|
|
/******/ // expose the modules object (__webpack_modules__)
|
|
/******/ __webpack_require__.m = modules;
|
|
/******/
|
|
/******/ // expose the module cache
|
|
/******/ __webpack_require__.c = installedModules;
|
|
/******/
|
|
/******/ // define getter function for harmony exports
|
|
/******/ __webpack_require__.d = function(exports, name, getter) {
|
|
/******/ if(!__webpack_require__.o(exports, name)) {
|
|
/******/ Object.defineProperty(exports, name, {
|
|
/******/ configurable: false,
|
|
/******/ enumerable: true,
|
|
/******/ get: getter
|
|
/******/ });
|
|
/******/ }
|
|
/******/ };
|
|
/******/
|
|
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
|
/******/ __webpack_require__.n = function(module) {
|
|
/******/ var getter = module && module.__esModule ?
|
|
/******/ function getDefault() { return module['default']; } :
|
|
/******/ function getModuleExports() { return module; };
|
|
/******/ __webpack_require__.d(getter, 'a', getter);
|
|
/******/ return getter;
|
|
/******/ };
|
|
/******/
|
|
/******/ // Object.prototype.hasOwnProperty.call
|
|
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
|
/******/
|
|
/******/ // __webpack_public_path__
|
|
/******/ __webpack_require__.p = "";
|
|
/******/
|
|
/******/ // Load entry module and return exports
|
|
/******/ return __webpack_require__(__webpack_require__.s = 7);
|
|
/******/ })
|
|
/************************************************************************/
|
|
/******/ ([
|
|
/* 0 */
|
|
/***/ (function(module, exports, __webpack_require__) {
|
|
|
|
"use strict";
|
|
/* WEBPACK VAR INJECTION */(function(global) {
|
|
|
|
var win;
|
|
|
|
if (typeof window !== "undefined") {
|
|
win = window;
|
|
} else if (typeof global !== "undefined") {
|
|
win = global;
|
|
} else if (typeof self !== "undefined") {
|
|
win = self;
|
|
} else {
|
|
win = {};
|
|
}
|
|
|
|
module.exports = win;
|
|
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(2)))
|
|
|
|
/***/ }),
|
|
/* 1 */
|
|
/***/ (function(module, exports, __webpack_require__) {
|
|
|
|
"use strict";
|
|
|
|
|
|
module.exports = function (callback) {
|
|
|
|
if (document.readyState === 'complete' || document.readyState === 'interactive') {
|
|
// Already ready or interactive, execute callback
|
|
callback.call();
|
|
} else if (document.attachEvent) {
|
|
// Old browsers
|
|
document.attachEvent('onreadystatechange', function () {
|
|
if (document.readyState === 'interactive') callback.call();
|
|
});
|
|
} else if (document.addEventListener) {
|
|
// Modern browsers
|
|
document.addEventListener('DOMContentLoaded', callback);
|
|
}
|
|
};
|
|
|
|
/***/ }),
|
|
/* 2 */
|
|
/***/ (function(module, exports, __webpack_require__) {
|
|
|
|
"use strict";
|
|
|
|
|
|
var _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; };
|
|
|
|
var g;
|
|
|
|
// This works in non-strict mode
|
|
g = function () {
|
|
return this;
|
|
}();
|
|
|
|
try {
|
|
// This works if eval is allowed (see CSP)
|
|
g = g || Function("return this")() || (1, eval)("this");
|
|
} catch (e) {
|
|
// This works if the window reference is available
|
|
if ((typeof window === "undefined" ? "undefined" : _typeof(window)) === "object") g = window;
|
|
}
|
|
|
|
// g can still be undefined, but nothing to do about it...
|
|
// We return undefined, instead of nothing here, so it's
|
|
// easier to handle this case. if(!global) { ...}
|
|
|
|
module.exports = g;
|
|
|
|
/***/ }),
|
|
/* 3 */
|
|
/***/ (function(module, exports, __webpack_require__) {
|
|
|
|
"use strict";
|
|
|
|
|
|
module.exports = __webpack_require__(9);
|
|
|
|
/***/ }),
|
|
/* 4 */,
|
|
/* 5 */,
|
|
/* 6 */,
|
|
/* 7 */
|
|
/***/ (function(module, exports, __webpack_require__) {
|
|
|
|
module.exports = __webpack_require__(8);
|
|
|
|
|
|
/***/ }),
|
|
/* 8 */
|
|
/***/ (function(module, exports, __webpack_require__) {
|
|
|
|
"use strict";
|
|
|
|
|
|
var _videoWorker = __webpack_require__(3);
|
|
|
|
var _videoWorker2 = _interopRequireDefault(_videoWorker);
|
|
|
|
var _global = __webpack_require__(0);
|
|
|
|
var _global2 = _interopRequireDefault(_global);
|
|
|
|
var _liteReady = __webpack_require__(1);
|
|
|
|
var _liteReady2 = _interopRequireDefault(_liteReady);
|
|
|
|
var _jarallaxVideo = __webpack_require__(10);
|
|
|
|
var _jarallaxVideo2 = _interopRequireDefault(_jarallaxVideo);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
// add video worker globally to fallback jarallax < 1.10 versions
|
|
_global2.default.VideoWorker = _global2.default.VideoWorker || _videoWorker2.default;
|
|
|
|
(0, _jarallaxVideo2.default)();
|
|
|
|
// data-jarallax-video initialization
|
|
(0, _liteReady2.default)(function () {
|
|
if (typeof jarallax !== 'undefined') {
|
|
jarallax(document.querySelectorAll('[data-jarallax-video]'));
|
|
}
|
|
});
|
|
|
|
/***/ }),
|
|
/* 9 */
|
|
/***/ (function(module, exports, __webpack_require__) {
|
|
|
|
"use strict";
|
|
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
|
|
var _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; };
|
|
|
|
var _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; }; }();
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
|
|
// Deferred
|
|
// thanks http://stackoverflow.com/questions/18096715/implement-deferred-object-without-using-jquery
|
|
function Deferred() {
|
|
this._done = [];
|
|
this._fail = [];
|
|
}
|
|
Deferred.prototype = {
|
|
execute: function execute(list, args) {
|
|
var i = list.length;
|
|
args = Array.prototype.slice.call(args);
|
|
while (i--) {
|
|
list[i].apply(null, args);
|
|
}
|
|
},
|
|
resolve: function resolve() {
|
|
this.execute(this._done, arguments);
|
|
},
|
|
reject: function reject() {
|
|
this.execute(this._fail, arguments);
|
|
},
|
|
done: function done(callback) {
|
|
this._done.push(callback);
|
|
},
|
|
fail: function fail(callback) {
|
|
this._fail.push(callback);
|
|
}
|
|
};
|
|
|
|
var ID = 0;
|
|
var YoutubeAPIadded = 0;
|
|
var VimeoAPIadded = 0;
|
|
var loadingYoutubePlayer = 0;
|
|
var loadingVimeoPlayer = 0;
|
|
var loadingYoutubeDefer = new Deferred();
|
|
var loadingVimeoDefer = new Deferred();
|
|
|
|
var VideoWorker = function () {
|
|
function VideoWorker(url, options) {
|
|
_classCallCheck(this, VideoWorker);
|
|
|
|
var self = this;
|
|
|
|
self.url = url;
|
|
|
|
self.options_default = {
|
|
autoplay: false,
|
|
loop: false,
|
|
mute: false,
|
|
volume: 100,
|
|
showContols: true,
|
|
|
|
// start / end video time in seconds
|
|
startTime: 0,
|
|
endTime: 0
|
|
};
|
|
|
|
self.options = self.extend({}, self.options_default, options);
|
|
|
|
// check URL
|
|
self.videoID = self.parseURL(url);
|
|
|
|
// init
|
|
if (self.videoID) {
|
|
self.ID = ID++;
|
|
self.loadAPI();
|
|
self.init();
|
|
}
|
|
}
|
|
|
|
// Extend like jQuery.extend
|
|
|
|
|
|
_createClass(VideoWorker, [{
|
|
key: 'extend',
|
|
value: function extend(out) {
|
|
var _arguments = arguments;
|
|
|
|
out = out || {};
|
|
Object.keys(arguments).forEach(function (i) {
|
|
if (!_arguments[i]) {
|
|
return;
|
|
}
|
|
Object.keys(_arguments[i]).forEach(function (key) {
|
|
out[key] = _arguments[i][key];
|
|
});
|
|
});
|
|
return out;
|
|
}
|
|
}, {
|
|
key: 'parseURL',
|
|
value: function parseURL(url) {
|
|
// parse youtube ID
|
|
function getYoutubeID(ytUrl) {
|
|
// eslint-disable-next-line no-useless-escape
|
|
var regExp = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/;
|
|
var match = ytUrl.match(regExp);
|
|
return match && match[1].length === 11 ? match[1] : false;
|
|
}
|
|
|
|
// parse vimeo ID
|
|
function getVimeoID(vmUrl) {
|
|
// eslint-disable-next-line no-useless-escape
|
|
var regExp = /https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/|)(\d+)(?:$|\/|\?)/;
|
|
var match = vmUrl.match(regExp);
|
|
return match && match[3] ? match[3] : false;
|
|
}
|
|
|
|
// parse local string
|
|
function getLocalVideos(locUrl) {
|
|
// eslint-disable-next-line no-useless-escape
|
|
var videoFormats = locUrl.split(/,(?=mp4\:|webm\:|ogv\:|ogg\:)/);
|
|
var result = {};
|
|
var ready = 0;
|
|
videoFormats.forEach(function (val) {
|
|
// eslint-disable-next-line no-useless-escape
|
|
var match = val.match(/^(mp4|webm|ogv|ogg)\:(.*)/);
|
|
if (match && match[1] && match[2]) {
|
|
// eslint-disable-next-line prefer-destructuring
|
|
result[match[1] === 'ogv' ? 'ogg' : match[1]] = match[2];
|
|
ready = 1;
|
|
}
|
|
});
|
|
return ready ? result : false;
|
|
}
|
|
|
|
var Youtube = getYoutubeID(url);
|
|
var Vimeo = getVimeoID(url);
|
|
var Local = getLocalVideos(url);
|
|
|
|
if (Youtube) {
|
|
this.type = 'youtube';
|
|
return Youtube;
|
|
} else if (Vimeo) {
|
|
this.type = 'vimeo';
|
|
return Vimeo;
|
|
} else if (Local) {
|
|
this.type = 'local';
|
|
return Local;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}, {
|
|
key: 'isValid',
|
|
value: function isValid() {
|
|
return !!this.videoID;
|
|
}
|
|
|
|
// events
|
|
|
|
}, {
|
|
key: 'on',
|
|
value: function on(name, callback) {
|
|
this.userEventsList = this.userEventsList || [];
|
|
|
|
// add new callback in events list
|
|
(this.userEventsList[name] || (this.userEventsList[name] = [])).push(callback);
|
|
}
|
|
}, {
|
|
key: 'off',
|
|
value: function off(name, callback) {
|
|
var _this = this;
|
|
|
|
if (!this.userEventsList || !this.userEventsList[name]) {
|
|
return;
|
|
}
|
|
|
|
if (!callback) {
|
|
delete this.userEventsList[name];
|
|
} else {
|
|
this.userEventsList[name].forEach(function (val, key) {
|
|
if (val === callback) {
|
|
_this.userEventsList[name][key] = false;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: 'fire',
|
|
value: function fire(name) {
|
|
var _this2 = this;
|
|
|
|
var args = [].slice.call(arguments, 1);
|
|
if (this.userEventsList && typeof this.userEventsList[name] !== 'undefined') {
|
|
this.userEventsList[name].forEach(function (val) {
|
|
// call with all arguments
|
|
if (val) {
|
|
val.apply(_this2, args);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: 'play',
|
|
value: function play(start) {
|
|
var self = this;
|
|
if (!self.player) {
|
|
return;
|
|
}
|
|
|
|
if (self.type === 'youtube' && self.player.playVideo) {
|
|
if (typeof start !== 'undefined') {
|
|
self.player.seekTo(start || 0);
|
|
}
|
|
if (YT.PlayerState.PLAYING !== self.player.getPlayerState()) {
|
|
self.player.playVideo();
|
|
}
|
|
}
|
|
|
|
if (self.type === 'vimeo') {
|
|
if (typeof start !== 'undefined') {
|
|
self.player.setCurrentTime(start);
|
|
}
|
|
self.player.getPaused().then(function (paused) {
|
|
if (paused) {
|
|
self.player.play();
|
|
}
|
|
});
|
|
}
|
|
|
|
if (self.type === 'local') {
|
|
if (typeof start !== 'undefined') {
|
|
self.player.currentTime = start;
|
|
}
|
|
if (self.player.paused) {
|
|
self.player.play();
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: 'pause',
|
|
value: function pause() {
|
|
var self = this;
|
|
if (!self.player) {
|
|
return;
|
|
}
|
|
|
|
if (self.type === 'youtube' && self.player.pauseVideo) {
|
|
if (YT.PlayerState.PLAYING === self.player.getPlayerState()) {
|
|
self.player.pauseVideo();
|
|
}
|
|
}
|
|
|
|
if (self.type === 'vimeo') {
|
|
self.player.getPaused().then(function (paused) {
|
|
if (!paused) {
|
|
self.player.pause();
|
|
}
|
|
});
|
|
}
|
|
|
|
if (self.type === 'local') {
|
|
if (!self.player.paused) {
|
|
self.player.pause();
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: 'mute',
|
|
value: function mute() {
|
|
var self = this;
|
|
if (!self.player) {
|
|
return;
|
|
}
|
|
|
|
if (self.type === 'youtube' && self.player.mute) {
|
|
self.player.mute();
|
|
}
|
|
|
|
if (self.type === 'vimeo' && self.player.setVolume) {
|
|
self.player.setVolume(0);
|
|
}
|
|
|
|
if (self.type === 'local') {
|
|
self.$video.muted = true;
|
|
}
|
|
}
|
|
}, {
|
|
key: 'unmute',
|
|
value: function unmute() {
|
|
var self = this;
|
|
if (!self.player) {
|
|
return;
|
|
}
|
|
|
|
if (self.type === 'youtube' && self.player.mute) {
|
|
self.player.unMute();
|
|
}
|
|
|
|
if (self.type === 'vimeo' && self.player.setVolume) {
|
|
self.player.setVolume(self.options.volume);
|
|
}
|
|
|
|
if (self.type === 'local') {
|
|
self.$video.muted = false;
|
|
}
|
|
}
|
|
}, {
|
|
key: 'setVolume',
|
|
value: function setVolume() {
|
|
var volume = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
|
|
var self = this;
|
|
if (!self.player || !volume) {
|
|
return;
|
|
}
|
|
|
|
if (self.type === 'youtube' && self.player.setVolume) {
|
|
self.player.setVolume(volume);
|
|
}
|
|
|
|
if (self.type === 'vimeo' && self.player.setVolume) {
|
|
self.player.setVolume(volume);
|
|
}
|
|
|
|
if (self.type === 'local') {
|
|
self.$video.volume = volume / 100;
|
|
}
|
|
}
|
|
}, {
|
|
key: 'getVolume',
|
|
value: function getVolume(callback) {
|
|
var self = this;
|
|
if (!self.player) {
|
|
callback(false);
|
|
return;
|
|
}
|
|
|
|
if (self.type === 'youtube' && self.player.getVolume) {
|
|
callback(self.player.getVolume());
|
|
}
|
|
|
|
if (self.type === 'vimeo' && self.player.getVolume) {
|
|
self.player.getVolume().then(function (volume) {
|
|
callback(volume);
|
|
});
|
|
}
|
|
|
|
if (self.type === 'local') {
|
|
callback(self.$video.volume * 100);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'getMuted',
|
|
value: function getMuted(callback) {
|
|
var self = this;
|
|
if (!self.player) {
|
|
callback(null);
|
|
return;
|
|
}
|
|
|
|
if (self.type === 'youtube' && self.player.isMuted) {
|
|
callback(self.player.isMuted());
|
|
}
|
|
|
|
if (self.type === 'vimeo' && self.player.getVolume) {
|
|
self.player.getVolume().then(function (volume) {
|
|
callback(!!volume);
|
|
});
|
|
}
|
|
|
|
if (self.type === 'local') {
|
|
callback(self.$video.muted);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'getImageURL',
|
|
value: function getImageURL(callback) {
|
|
var self = this;
|
|
|
|
if (self.videoImage) {
|
|
callback(self.videoImage);
|
|
return;
|
|
}
|
|
|
|
if (self.type === 'youtube') {
|
|
var availableSizes = ['maxresdefault', 'sddefault', 'hqdefault', '0'];
|
|
var step = 0;
|
|
|
|
var tempImg = new Image();
|
|
tempImg.onload = function () {
|
|
// if no thumbnail, youtube add their own image with width = 120px
|
|
if ((this.naturalWidth || this.width) !== 120 || step === availableSizes.length - 1) {
|
|
// ok
|
|
self.videoImage = 'https://img.youtube.com/vi/' + self.videoID + '/' + availableSizes[step] + '.jpg';
|
|
callback(self.videoImage);
|
|
} else {
|
|
// try another size
|
|
step++;
|
|
this.src = 'https://img.youtube.com/vi/' + self.videoID + '/' + availableSizes[step] + '.jpg';
|
|
}
|
|
};
|
|
tempImg.src = 'https://img.youtube.com/vi/' + self.videoID + '/' + availableSizes[step] + '.jpg';
|
|
}
|
|
|
|
if (self.type === 'vimeo') {
|
|
var request = new XMLHttpRequest();
|
|
request.open('GET', 'https://vimeo.com/api/v2/video/' + self.videoID + '.json', true);
|
|
request.onreadystatechange = function () {
|
|
if (this.readyState === 4) {
|
|
if (this.status >= 200 && this.status < 400) {
|
|
// Success!
|
|
var response = JSON.parse(this.responseText);
|
|
self.videoImage = response[0].thumbnail_large;
|
|
callback(self.videoImage);
|
|
} else {
|
|
// Error :(
|
|
}
|
|
}
|
|
};
|
|
request.send();
|
|
request = null;
|
|
}
|
|
}
|
|
|
|
// fallback to the old version.
|
|
|
|
}, {
|
|
key: 'getIframe',
|
|
value: function getIframe(callback) {
|
|
this.getVideo(callback);
|
|
}
|
|
}, {
|
|
key: 'getVideo',
|
|
value: function getVideo(callback) {
|
|
var self = this;
|
|
|
|
// return generated video block
|
|
if (self.$video) {
|
|
callback(self.$video);
|
|
return;
|
|
}
|
|
|
|
// generate new video block
|
|
self.onAPIready(function () {
|
|
var hiddenDiv = void 0;
|
|
if (!self.$video) {
|
|
hiddenDiv = document.createElement('div');
|
|
hiddenDiv.style.display = 'none';
|
|
}
|
|
|
|
// Youtube
|
|
if (self.type === 'youtube') {
|
|
self.playerOptions = {};
|
|
self.playerOptions.videoId = self.videoID;
|
|
self.playerOptions.playerVars = {
|
|
autohide: 1,
|
|
rel: 0,
|
|
autoplay: 0,
|
|
// autoplay enable on mobile devices
|
|
playsinline: 1
|
|
};
|
|
|
|
// hide controls
|
|
if (!self.options.showContols) {
|
|
self.playerOptions.playerVars.iv_load_policy = 3;
|
|
self.playerOptions.playerVars.modestbranding = 1;
|
|
self.playerOptions.playerVars.controls = 0;
|
|
self.playerOptions.playerVars.showinfo = 0;
|
|
self.playerOptions.playerVars.disablekb = 1;
|
|
}
|
|
|
|
// events
|
|
var ytStarted = void 0;
|
|
var ytProgressInterval = void 0;
|
|
self.playerOptions.events = {
|
|
onReady: function onReady(e) {
|
|
// mute
|
|
if (self.options.mute) {
|
|
e.target.mute();
|
|
} else if (self.options.volume) {
|
|
e.target.setVolume(self.options.volume);
|
|
}
|
|
|
|
// autoplay
|
|
if (self.options.autoplay) {
|
|
self.play(self.options.startTime);
|
|
}
|
|
self.fire('ready', e);
|
|
|
|
// volumechange
|
|
setInterval(function () {
|
|
self.getVolume(function (volume) {
|
|
if (self.options.volume !== volume) {
|
|
self.options.volume = volume;
|
|
self.fire('volumechange', e);
|
|
}
|
|
});
|
|
}, 150);
|
|
},
|
|
onStateChange: function onStateChange(e) {
|
|
// loop
|
|
if (self.options.loop && e.data === YT.PlayerState.ENDED) {
|
|
self.play(self.options.startTime);
|
|
}
|
|
if (!ytStarted && e.data === YT.PlayerState.PLAYING) {
|
|
ytStarted = 1;
|
|
self.fire('started', e);
|
|
}
|
|
if (e.data === YT.PlayerState.PLAYING) {
|
|
self.fire('play', e);
|
|
}
|
|
if (e.data === YT.PlayerState.PAUSED) {
|
|
self.fire('pause', e);
|
|
}
|
|
if (e.data === YT.PlayerState.ENDED) {
|
|
self.fire('ended', e);
|
|
}
|
|
|
|
// progress check
|
|
if (e.data === YT.PlayerState.PLAYING) {
|
|
ytProgressInterval = setInterval(function () {
|
|
self.fire('timeupdate', e);
|
|
|
|
// check for end of video and play again or stop
|
|
if (self.options.endTime && self.player.getCurrentTime() >= self.options.endTime) {
|
|
if (self.options.loop) {
|
|
self.play(self.options.startTime);
|
|
} else {
|
|
self.pause();
|
|
}
|
|
}
|
|
}, 150);
|
|
} else {
|
|
clearInterval(ytProgressInterval);
|
|
}
|
|
}
|
|
};
|
|
|
|
var firstInit = !self.$video;
|
|
if (firstInit) {
|
|
var div = document.createElement('div');
|
|
div.setAttribute('id', self.playerID);
|
|
hiddenDiv.appendChild(div);
|
|
document.body.appendChild(hiddenDiv);
|
|
}
|
|
self.player = self.player || new window.YT.Player(self.playerID, self.playerOptions);
|
|
if (firstInit) {
|
|
self.$video = document.getElementById(self.playerID);
|
|
|
|
// get video width and height
|
|
self.videoWidth = parseInt(self.$video.getAttribute('width'), 10) || 1280;
|
|
self.videoHeight = parseInt(self.$video.getAttribute('height'), 10) || 720;
|
|
}
|
|
}
|
|
|
|
// Vimeo
|
|
if (self.type === 'vimeo') {
|
|
self.playerOptions = '';
|
|
|
|
self.playerOptions += 'player_id=' + self.playerID;
|
|
self.playerOptions += '&autopause=0';
|
|
self.playerOptions += '&transparent=0';
|
|
|
|
// hide controls
|
|
if (!self.options.showContols) {
|
|
self.playerOptions += '&badge=0&byline=0&portrait=0&title=0';
|
|
}
|
|
|
|
// autoplay
|
|
self.playerOptions += '&autoplay=' + (self.options.autoplay ? '1' : '0');
|
|
|
|
// loop
|
|
self.playerOptions += '&loop=' + (self.options.loop ? 1 : 0);
|
|
|
|
if (!self.$video) {
|
|
self.$video = document.createElement('iframe');
|
|
self.$video.setAttribute('id', self.playerID);
|
|
self.$video.setAttribute('src', 'https://player.vimeo.com/video/' + self.videoID + '?' + self.playerOptions);
|
|
self.$video.setAttribute('frameborder', '0');
|
|
hiddenDiv.appendChild(self.$video);
|
|
document.body.appendChild(hiddenDiv);
|
|
}
|
|
|
|
self.player = self.player || new Vimeo.Player(self.$video);
|
|
|
|
// get video width and height
|
|
self.player.getVideoWidth().then(function (width) {
|
|
self.videoWidth = width || 1280;
|
|
});
|
|
self.player.getVideoHeight().then(function (height) {
|
|
self.videoHeight = height || 720;
|
|
});
|
|
|
|
// set current time for autoplay
|
|
if (self.options.startTime && self.options.autoplay) {
|
|
self.player.setCurrentTime(self.options.startTime);
|
|
}
|
|
|
|
// mute
|
|
if (self.options.mute) {
|
|
self.player.setVolume(0);
|
|
} else if (self.options.volume) {
|
|
self.player.setVolume(self.options.volume);
|
|
}
|
|
|
|
var vmStarted = void 0;
|
|
self.player.on('timeupdate', function (e) {
|
|
if (!vmStarted) {
|
|
self.fire('started', e);
|
|
vmStarted = 1;
|
|
}
|
|
|
|
self.fire('timeupdate', e);
|
|
|
|
// check for end of video and play again or stop
|
|
if (self.options.endTime) {
|
|
if (self.options.endTime && e.seconds >= self.options.endTime) {
|
|
if (self.options.loop) {
|
|
self.play(self.options.startTime);
|
|
} else {
|
|
self.pause();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
self.player.on('play', function (e) {
|
|
self.fire('play', e);
|
|
|
|
// check for the start time and start with it
|
|
if (self.options.startTime && e.seconds === 0) {
|
|
self.play(self.options.startTime);
|
|
}
|
|
});
|
|
self.player.on('pause', function (e) {
|
|
self.fire('pause', e);
|
|
});
|
|
self.player.on('ended', function (e) {
|
|
self.fire('ended', e);
|
|
});
|
|
self.player.on('loaded', function (e) {
|
|
self.fire('ready', e);
|
|
});
|
|
self.player.on('volumechange', function (e) {
|
|
self.fire('volumechange', e);
|
|
});
|
|
}
|
|
|
|
// Local
|
|
function addSourceToLocal(element, src, type) {
|
|
var source = document.createElement('source');
|
|
source.src = src;
|
|
source.type = type;
|
|
element.appendChild(source);
|
|
}
|
|
if (self.type === 'local') {
|
|
if (!self.$video) {
|
|
self.$video = document.createElement('video');
|
|
|
|
// mute
|
|
if (self.options.mute) {
|
|
self.$video.muted = true;
|
|
} else if (self.$video.volume) {
|
|
self.$video.volume = self.options.volume / 100;
|
|
}
|
|
|
|
// loop
|
|
if (self.options.loop) {
|
|
self.$video.loop = true;
|
|
}
|
|
|
|
// autoplay enable on mobile devices
|
|
self.$video.setAttribute('playsinline', '');
|
|
self.$video.setAttribute('webkit-playsinline', '');
|
|
|
|
self.$video.setAttribute('id', self.playerID);
|
|
hiddenDiv.appendChild(self.$video);
|
|
document.body.appendChild(hiddenDiv);
|
|
|
|
Object.keys(self.videoID).forEach(function (key) {
|
|
addSourceToLocal(self.$video, self.videoID[key], 'video/' + key);
|
|
});
|
|
}
|
|
|
|
self.player = self.player || self.$video;
|
|
|
|
var locStarted = void 0;
|
|
self.player.addEventListener('playing', function (e) {
|
|
if (!locStarted) {
|
|
self.fire('started', e);
|
|
}
|
|
locStarted = 1;
|
|
});
|
|
self.player.addEventListener('timeupdate', function (e) {
|
|
self.fire('timeupdate', e);
|
|
|
|
// check for end of video and play again or stop
|
|
if (self.options.endTime) {
|
|
if (self.options.endTime && this.currentTime >= self.options.endTime) {
|
|
if (self.options.loop) {
|
|
self.play(self.options.startTime);
|
|
} else {
|
|
self.pause();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
self.player.addEventListener('play', function (e) {
|
|
self.fire('play', e);
|
|
});
|
|
self.player.addEventListener('pause', function (e) {
|
|
self.fire('pause', e);
|
|
});
|
|
self.player.addEventListener('ended', function (e) {
|
|
self.fire('ended', e);
|
|
});
|
|
self.player.addEventListener('loadedmetadata', function () {
|
|
// get video width and height
|
|
self.videoWidth = this.videoWidth || 1280;
|
|
self.videoHeight = this.videoHeight || 720;
|
|
|
|
self.fire('ready');
|
|
|
|
// autoplay
|
|
if (self.options.autoplay) {
|
|
self.play(self.options.startTime);
|
|
}
|
|
});
|
|
self.player.addEventListener('volumechange', function (e) {
|
|
self.getVolume(function (volume) {
|
|
self.options.volume = volume;
|
|
});
|
|
self.fire('volumechange', e);
|
|
});
|
|
}
|
|
|
|
callback(self.$video);
|
|
});
|
|
}
|
|
}, {
|
|
key: 'init',
|
|
value: function init() {
|
|
var self = this;
|
|
|
|
self.playerID = 'VideoWorker-' + self.ID;
|
|
}
|
|
}, {
|
|
key: 'loadAPI',
|
|
value: function loadAPI() {
|
|
var self = this;
|
|
|
|
if (YoutubeAPIadded && VimeoAPIadded) {
|
|
return;
|
|
}
|
|
|
|
var src = '';
|
|
|
|
// load Youtube API
|
|
if (self.type === 'youtube' && !YoutubeAPIadded) {
|
|
YoutubeAPIadded = 1;
|
|
src = 'https://www.youtube.com/iframe_api';
|
|
}
|
|
|
|
// load Vimeo API
|
|
if (self.type === 'vimeo' && !VimeoAPIadded) {
|
|
VimeoAPIadded = 1;
|
|
src = 'https://player.vimeo.com/api/player.js';
|
|
}
|
|
|
|
if (!src) {
|
|
return;
|
|
}
|
|
|
|
// add script in head section
|
|
var tag = document.createElement('script');
|
|
var head = document.getElementsByTagName('head')[0];
|
|
tag.src = src;
|
|
|
|
head.appendChild(tag);
|
|
|
|
head = null;
|
|
tag = null;
|
|
}
|
|
}, {
|
|
key: 'onAPIready',
|
|
value: function onAPIready(callback) {
|
|
var self = this;
|
|
|
|
// Youtube
|
|
if (self.type === 'youtube') {
|
|
// Listen for global YT player callback
|
|
if ((typeof YT === 'undefined' || YT.loaded === 0) && !loadingYoutubePlayer) {
|
|
// Prevents Ready event from being called twice
|
|
loadingYoutubePlayer = 1;
|
|
|
|
// Creates deferred so, other players know when to wait.
|
|
window.onYouTubeIframeAPIReady = function () {
|
|
window.onYouTubeIframeAPIReady = null;
|
|
loadingYoutubeDefer.resolve('done');
|
|
callback();
|
|
};
|
|
} else if ((typeof YT === 'undefined' ? 'undefined' : _typeof(YT)) === 'object' && YT.loaded === 1) {
|
|
callback();
|
|
} else {
|
|
loadingYoutubeDefer.done(function () {
|
|
callback();
|
|
});
|
|
}
|
|
}
|
|
|
|
// Vimeo
|
|
if (self.type === 'vimeo') {
|
|
if (typeof Vimeo === 'undefined' && !loadingVimeoPlayer) {
|
|
loadingVimeoPlayer = 1;
|
|
var vimeoInterval = setInterval(function () {
|
|
if (typeof Vimeo !== 'undefined') {
|
|
clearInterval(vimeoInterval);
|
|
loadingVimeoDefer.resolve('done');
|
|
callback();
|
|
}
|
|
}, 20);
|
|
} else if (typeof Vimeo !== 'undefined') {
|
|
callback();
|
|
} else {
|
|
loadingVimeoDefer.done(function () {
|
|
callback();
|
|
});
|
|
}
|
|
}
|
|
|
|
// Local
|
|
if (self.type === 'local') {
|
|
callback();
|
|
}
|
|
}
|
|
}]);
|
|
|
|
return VideoWorker;
|
|
}();
|
|
|
|
exports.default = VideoWorker;
|
|
|
|
/***/ }),
|
|
/* 10 */
|
|
/***/ (function(module, exports, __webpack_require__) {
|
|
|
|
"use strict";
|
|
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = jarallaxVideo;
|
|
|
|
var _videoWorker = __webpack_require__(3);
|
|
|
|
var _videoWorker2 = _interopRequireDefault(_videoWorker);
|
|
|
|
var _global = __webpack_require__(0);
|
|
|
|
var _global2 = _interopRequireDefault(_global);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
function jarallaxVideo() {
|
|
var jarallax = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _global2.default.jarallax;
|
|
|
|
if (typeof jarallax === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
var Jarallax = jarallax.constructor;
|
|
|
|
// append video after init Jarallax
|
|
var defInit = Jarallax.prototype.init;
|
|
Jarallax.prototype.init = function () {
|
|
var self = this;
|
|
|
|
defInit.apply(self);
|
|
|
|
if (self.video && !self.options.disableVideo()) {
|
|
self.video.getVideo(function (video) {
|
|
var $parent = video.parentNode;
|
|
self.css(video, {
|
|
position: self.image.position,
|
|
top: '0px',
|
|
left: '0px',
|
|
right: '0px',
|
|
bottom: '0px',
|
|
width: '100%',
|
|
height: '100%',
|
|
maxWidth: 'none',
|
|
maxHeight: 'none',
|
|
margin: 0,
|
|
zIndex: -1
|
|
});
|
|
self.$video = video;
|
|
self.image.$container.appendChild(video);
|
|
|
|
// remove parent video element (created by VideoWorker)
|
|
$parent.parentNode.removeChild($parent);
|
|
});
|
|
}
|
|
};
|
|
|
|
// cover video
|
|
var defCoverImage = Jarallax.prototype.coverImage;
|
|
Jarallax.prototype.coverImage = function () {
|
|
var self = this;
|
|
var imageData = defCoverImage.apply(self);
|
|
var node = self.image.$item ? self.image.$item.nodeName : false;
|
|
|
|
if (imageData && self.video && node && (node === 'IFRAME' || node === 'VIDEO')) {
|
|
var h = imageData.image.height;
|
|
var w = h * self.image.width / self.image.height;
|
|
var ml = (imageData.container.width - w) / 2;
|
|
var mt = imageData.image.marginTop;
|
|
|
|
if (imageData.container.width > w) {
|
|
w = imageData.container.width;
|
|
h = w * self.image.height / self.image.width;
|
|
ml = 0;
|
|
mt += (imageData.image.height - h) / 2;
|
|
}
|
|
|
|
// add video height over than need to hide controls
|
|
if (node === 'IFRAME') {
|
|
h += 400;
|
|
mt -= 200;
|
|
}
|
|
|
|
self.css(self.$video, {
|
|
width: w + 'px',
|
|
marginLeft: ml + 'px',
|
|
height: h + 'px',
|
|
marginTop: mt + 'px'
|
|
});
|
|
}
|
|
|
|
return imageData;
|
|
};
|
|
|
|
// init video
|
|
var defInitImg = Jarallax.prototype.initImg;
|
|
Jarallax.prototype.initImg = function () {
|
|
var self = this;
|
|
var defaultResult = defInitImg.apply(self);
|
|
|
|
if (!self.options.videoSrc) {
|
|
self.options.videoSrc = self.$item.getAttribute('data-jarallax-video') || null;
|
|
}
|
|
|
|
if (self.options.videoSrc) {
|
|
self.defaultInitImgResult = defaultResult;
|
|
return true;
|
|
}
|
|
|
|
return defaultResult;
|
|
};
|
|
|
|
var defCanInitParallax = Jarallax.prototype.canInitParallax;
|
|
Jarallax.prototype.canInitParallax = function () {
|
|
var self = this;
|
|
var defaultResult = defCanInitParallax.apply(self);
|
|
|
|
if (!self.options.videoSrc) {
|
|
return defaultResult;
|
|
}
|
|
|
|
var video = new _videoWorker2.default(self.options.videoSrc, {
|
|
autoplay: true,
|
|
loop: true,
|
|
showContols: false,
|
|
startTime: self.options.videoStartTime || 0,
|
|
endTime: self.options.videoEndTime || 0,
|
|
mute: self.options.videoVolume ? 0 : 1,
|
|
volume: self.options.videoVolume || 0
|
|
});
|
|
|
|
if (video.isValid()) {
|
|
// if parallax will not be inited, we can add thumbnail on background.
|
|
if (!defaultResult) {
|
|
if (!self.defaultInitImgResult) {
|
|
video.getImageURL(function (url) {
|
|
// save default user styles
|
|
var curStyle = self.$item.getAttribute('style');
|
|
if (curStyle) {
|
|
self.$item.setAttribute('data-jarallax-original-styles', curStyle);
|
|
}
|
|
|
|
// set new background
|
|
self.css(self.$item, {
|
|
'background-image': 'url("' + url + '")',
|
|
'background-position': 'center',
|
|
'background-size': 'cover'
|
|
});
|
|
});
|
|
}
|
|
|
|
// init video
|
|
} else {
|
|
video.on('ready', function () {
|
|
if (self.options.videoPlayOnlyVisible) {
|
|
var oldOnScroll = self.onScroll;
|
|
self.onScroll = function () {
|
|
oldOnScroll.apply(self);
|
|
if (self.isVisible()) {
|
|
video.play();
|
|
} else {
|
|
video.pause();
|
|
}
|
|
};
|
|
} else {
|
|
video.play();
|
|
}
|
|
});
|
|
|
|
video.on('started', function () {
|
|
self.image.$default_item = self.image.$item;
|
|
self.image.$item = self.$video;
|
|
|
|
// set video width and height
|
|
self.image.width = self.video.videoWidth || 1280;
|
|
self.image.height = self.video.videoHeight || 720;
|
|
self.options.imgWidth = self.image.width;
|
|
self.options.imgHeight = self.image.height;
|
|
self.coverImage();
|
|
self.clipContainer();
|
|
self.onScroll();
|
|
|
|
// hide image
|
|
if (self.image.$default_item) {
|
|
self.image.$default_item.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
self.video = video;
|
|
|
|
// set image if not exists
|
|
if (!self.defaultInitImgResult) {
|
|
if (video.type !== 'local') {
|
|
video.getImageURL(function (url) {
|
|
self.image.src = url;
|
|
self.init();
|
|
});
|
|
|
|
return false;
|
|
}
|
|
|
|
// set empty image on local video if not defined
|
|
self.image.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
|
|
return defaultResult;
|
|
};
|
|
|
|
// Destroy video parallax
|
|
var defDestroy = Jarallax.prototype.destroy;
|
|
Jarallax.prototype.destroy = function () {
|
|
var self = this;
|
|
|
|
if (self.image.$default_item) {
|
|
self.image.$item = self.image.$default_item;
|
|
delete self.image.$default_item;
|
|
}
|
|
|
|
defDestroy.apply(self);
|
|
};
|
|
}
|
|
|
|
/***/ })
|
|
/******/ ]); |