1358 lines
43 KiB
JavaScript
1358 lines
43 KiB
JavaScript
|
/*!
|
||
|
|
* 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, { enumerable: true, get: getter });
|
||
|
|
/******/ }
|
||
|
|
/******/ };
|
||
|
|
/******/
|
||
|
|
/******/ // define __esModule on exports
|
||
|
|
/******/ __webpack_require__.r = function(exports) {
|
||
|
|
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
||
|
|
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
||
|
|
/******/ }
|
||
|
|
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
||
|
|
/******/ };
|
||
|
|
/******/
|
||
|
|
/******/ // create a fake namespace object
|
||
|
|
/******/ // mode & 1: value is a module id, require it
|
||
|
|
/******/ // mode & 2: merge all properties of value into the ns
|
||
|
|
/******/ // mode & 4: return value when already ns object
|
||
|
|
/******/ // mode & 8|1: behave like require
|
||
|
|
/******/ __webpack_require__.t = function(value, mode) {
|
||
|
|
/******/ if(mode & 1) value = __webpack_require__(value);
|
||
|
|
/******/ if(mode & 8) return value;
|
||
|
|
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
|
||
|
|
/******/ var ns = Object.create(null);
|
||
|
|
/******/ __webpack_require__.r(ns);
|
||
|
|
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
|
||
|
|
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
|
||
|
|
/******/ return ns;
|
||
|
|
/******/ };
|
||
|
|
/******/
|
||
|
|
/******/ // 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 = 6);
|
||
|
|
/******/ })
|
||
|
|
/************************************************************************/
|
||
|
|
/******/ ([
|
||
|
|
/* 0 */,
|
||
|
|
/* 1 */,
|
||
|
|
/* 2 */
|
||
|
|
/***/ (function(module, exports) {
|
||
|
|
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
/***/ }),
|
||
|
|
/* 3 */
|
||
|
|
/***/ (function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
/* 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(this, __webpack_require__(4)))
|
||
|
|
|
||
|
|
/***/ }),
|
||
|
|
/* 4 */
|
||
|
|
/***/ (function(module, exports) {
|
||
|
|
|
||
|
|
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _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 || new Function("return 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;
|
||
|
|
|
||
|
|
/***/ }),
|
||
|
|
/* 5 */,
|
||
|
|
/* 6 */
|
||
|
|
/***/ (function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
module.exports = __webpack_require__(7);
|
||
|
|
|
||
|
|
|
||
|
|
/***/ }),
|
||
|
|
/* 7 */
|
||
|
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
__webpack_require__.r(__webpack_exports__);
|
||
|
|
/* harmony import */ var video_worker__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8);
|
||
|
|
/* harmony import */ var global__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
|
||
|
|
/* harmony import */ var global__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(global__WEBPACK_IMPORTED_MODULE_1__);
|
||
|
|
/* harmony import */ var lite_ready__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
|
||
|
|
/* harmony import */ var lite_ready__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lite_ready__WEBPACK_IMPORTED_MODULE_2__);
|
||
|
|
/* harmony import */ var _jarallax_video_esm__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// add video worker globally to fallback jarallax < 1.10 versions
|
||
|
|
|
||
|
|
global__WEBPACK_IMPORTED_MODULE_1___default.a.VideoWorker = global__WEBPACK_IMPORTED_MODULE_1___default.a.VideoWorker || video_worker__WEBPACK_IMPORTED_MODULE_0__["default"];
|
||
|
|
Object(_jarallax_video_esm__WEBPACK_IMPORTED_MODULE_3__["default"])(); // data-jarallax-video initialization
|
||
|
|
|
||
|
|
lite_ready__WEBPACK_IMPORTED_MODULE_2___default()(function () {
|
||
|
|
if ('undefined' !== typeof global__WEBPACK_IMPORTED_MODULE_1___default.a.jarallax) {
|
||
|
|
global__WEBPACK_IMPORTED_MODULE_1___default.a.jarallax(document.querySelectorAll('[data-jarallax-video]'));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
/***/ }),
|
||
|
|
/* 8 */
|
||
|
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
__webpack_require__.r(__webpack_exports__);
|
||
|
|
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return VideoWorker; });
|
||
|
|
/* harmony import */ var global__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
|
||
|
|
/* harmony import */ var global__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(global__WEBPACK_IMPORTED_MODULE_0__);
|
||
|
|
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
||
|
|
|
||
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
|
||
|
|
|
||
|
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
||
|
|
|
||
|
|
// Deferred
|
||
|
|
// thanks http://stackoverflow.com/questions/18096715/implement-deferred-object-without-using-jquery
|
||
|
|
|
||
|
|
function Deferred() {
|
||
|
|
this.doneCallbacks = [];
|
||
|
|
this.failCallbacks = [];
|
||
|
|
}
|
||
|
|
|
||
|
|
Deferred.prototype = {
|
||
|
|
execute: function execute(list, args) {
|
||
|
|
var i = list.length;
|
||
|
|
args = Array.prototype.slice.call(args);
|
||
|
|
|
||
|
|
while (i) {
|
||
|
|
i -= 1;
|
||
|
|
list[i].apply(null, args);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
resolve: function resolve() {
|
||
|
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
||
|
|
args[_key] = arguments[_key];
|
||
|
|
}
|
||
|
|
|
||
|
|
this.execute(this.doneCallbacks, args);
|
||
|
|
},
|
||
|
|
reject: function reject() {
|
||
|
|
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
||
|
|
args[_key2] = arguments[_key2];
|
||
|
|
}
|
||
|
|
|
||
|
|
this.execute(this.failCallbacks, args);
|
||
|
|
},
|
||
|
|
done: function done(callback) {
|
||
|
|
this.doneCallbacks.push(callback);
|
||
|
|
},
|
||
|
|
fail: function fail(callback) {
|
||
|
|
this.failCallbacks.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 = /*#__PURE__*/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;
|
||
|
|
ID += 1;
|
||
|
|
self.loadAPI();
|
||
|
|
self.init();
|
||
|
|
}
|
||
|
|
} // Extend like jQuery.extend
|
||
|
|
// eslint-disable-next-line class-methods-use-this
|
||
|
|
|
||
|
|
|
||
|
|
_createClass(VideoWorker, [{
|
||
|
|
key: "extend",
|
||
|
|
value: function extend() {
|
||
|
|
for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
|
||
|
|
args[_key3] = arguments[_key3];
|
||
|
|
}
|
||
|
|
|
||
|
|
var out = args[0] || {};
|
||
|
|
Object.keys(args).forEach(function (i) {
|
||
|
|
if (!args[i]) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
Object.keys(args[i]).forEach(function (key) {
|
||
|
|
out[key] = args[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 && 11 === match[1].length ? 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['ogv' === match[1] ? '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;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (Vimeo) {
|
||
|
|
this.type = 'vimeo';
|
||
|
|
return Vimeo;
|
||
|
|
}
|
||
|
|
|
||
|
|
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;
|
||
|
|
|
||
|
|
for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
|
||
|
|
args[_key4 - 1] = arguments[_key4];
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.userEventsList && 'undefined' !== typeof this.userEventsList[name]) {
|
||
|
|
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 ('youtube' === self.type && self.player.playVideo) {
|
||
|
|
if ('undefined' !== typeof start) {
|
||
|
|
self.player.seekTo(start || 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (global__WEBPACK_IMPORTED_MODULE_0___default.a.YT.PlayerState.PLAYING !== self.player.getPlayerState()) {
|
||
|
|
self.player.playVideo();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if ('vimeo' === self.type) {
|
||
|
|
if ('undefined' !== typeof start) {
|
||
|
|
self.player.setCurrentTime(start);
|
||
|
|
}
|
||
|
|
|
||
|
|
self.player.getPaused().then(function (paused) {
|
||
|
|
if (paused) {
|
||
|
|
self.player.play();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if ('local' === self.type) {
|
||
|
|
if ('undefined' !== typeof start) {
|
||
|
|
self.player.currentTime = start;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (self.player.paused) {
|
||
|
|
self.player.play();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: "pause",
|
||
|
|
value: function pause() {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
if (!self.player) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if ('youtube' === self.type && self.player.pauseVideo) {
|
||
|
|
if (global__WEBPACK_IMPORTED_MODULE_0___default.a.YT.PlayerState.PLAYING === self.player.getPlayerState()) {
|
||
|
|
self.player.pauseVideo();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if ('vimeo' === self.type) {
|
||
|
|
self.player.getPaused().then(function (paused) {
|
||
|
|
if (!paused) {
|
||
|
|
self.player.pause();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if ('local' === self.type) {
|
||
|
|
if (!self.player.paused) {
|
||
|
|
self.player.pause();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: "mute",
|
||
|
|
value: function mute() {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
if (!self.player) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if ('youtube' === self.type && self.player.mute) {
|
||
|
|
self.player.mute();
|
||
|
|
}
|
||
|
|
|
||
|
|
if ('vimeo' === self.type && self.player.setVolume) {
|
||
|
|
self.player.setVolume(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
if ('local' === self.type) {
|
||
|
|
self.$video.muted = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: "unmute",
|
||
|
|
value: function unmute() {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
if (!self.player) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if ('youtube' === self.type && self.player.mute) {
|
||
|
|
self.player.unMute();
|
||
|
|
}
|
||
|
|
|
||
|
|
if ('vimeo' === self.type && self.player.setVolume) {
|
||
|
|
self.player.setVolume(self.options.volume);
|
||
|
|
}
|
||
|
|
|
||
|
|
if ('local' === self.type) {
|
||
|
|
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 ('youtube' === self.type && self.player.setVolume) {
|
||
|
|
self.player.setVolume(volume);
|
||
|
|
}
|
||
|
|
|
||
|
|
if ('vimeo' === self.type && self.player.setVolume) {
|
||
|
|
self.player.setVolume(volume);
|
||
|
|
}
|
||
|
|
|
||
|
|
if ('local' === self.type) {
|
||
|
|
self.$video.volume = volume / 100;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: "getVolume",
|
||
|
|
value: function getVolume(callback) {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
if (!self.player) {
|
||
|
|
callback(false);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if ('youtube' === self.type && self.player.getVolume) {
|
||
|
|
callback(self.player.getVolume());
|
||
|
|
}
|
||
|
|
|
||
|
|
if ('vimeo' === self.type && self.player.getVolume) {
|
||
|
|
self.player.getVolume().then(function (volume) {
|
||
|
|
callback(volume);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if ('local' === self.type) {
|
||
|
|
callback(self.$video.volume * 100);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: "getMuted",
|
||
|
|
value: function getMuted(callback) {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
if (!self.player) {
|
||
|
|
callback(null);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if ('youtube' === self.type && self.player.isMuted) {
|
||
|
|
callback(self.player.isMuted());
|
||
|
|
}
|
||
|
|
|
||
|
|
if ('vimeo' === self.type && self.player.getVolume) {
|
||
|
|
self.player.getVolume().then(function (volume) {
|
||
|
|
callback(!!volume);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if ('local' === self.type) {
|
||
|
|
callback(self.$video.muted);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: "getImageURL",
|
||
|
|
value: function getImageURL(callback) {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
if (self.videoImage) {
|
||
|
|
callback(self.videoImage);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if ('youtube' === self.type) {
|
||
|
|
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 (120 !== (this.naturalWidth || this.width) || step === availableSizes.length - 1) {
|
||
|
|
// ok
|
||
|
|
self.videoImage = "https://img.youtube.com/vi/".concat(self.videoID, "/").concat(availableSizes[step], ".jpg");
|
||
|
|
callback(self.videoImage);
|
||
|
|
} else {
|
||
|
|
// try another size
|
||
|
|
step += 1;
|
||
|
|
this.src = "https://img.youtube.com/vi/".concat(self.videoID, "/").concat(availableSizes[step], ".jpg");
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
tempImg.src = "https://img.youtube.com/vi/".concat(self.videoID, "/").concat(availableSizes[step], ".jpg");
|
||
|
|
}
|
||
|
|
|
||
|
|
if ('vimeo' === self.type) {
|
||
|
|
var request = new XMLHttpRequest();
|
||
|
|
request.open('GET', "https://vimeo.com/api/v2/video/".concat(self.videoID, ".json"), true);
|
||
|
|
|
||
|
|
request.onreadystatechange = function () {
|
||
|
|
if (4 === this.readyState) {
|
||
|
|
if (200 <= this.status && 400 > this.status) {
|
||
|
|
// 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;
|
||
|
|
|
||
|
|
if (!self.$video) {
|
||
|
|
hiddenDiv = document.createElement('div');
|
||
|
|
hiddenDiv.style.display = 'none';
|
||
|
|
} // Youtube
|
||
|
|
|
||
|
|
|
||
|
|
if ('youtube' === self.type) {
|
||
|
|
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;
|
||
|
|
var ytProgressInterval;
|
||
|
|
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); // For seamless loops, set the endTime to 0.1 seconds less than the video's duration
|
||
|
|
// https://github.com/nk-o/video-worker/issues/2
|
||
|
|
|
||
|
|
if (self.options.loop && !self.options.endTime) {
|
||
|
|
var secondsOffset = 0.1;
|
||
|
|
self.options.endTime = self.player.getDuration() - secondsOffset;
|
||
|
|
} // 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 === global__WEBPACK_IMPORTED_MODULE_0___default.a.YT.PlayerState.ENDED) {
|
||
|
|
self.play(self.options.startTime);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!ytStarted && e.data === global__WEBPACK_IMPORTED_MODULE_0___default.a.YT.PlayerState.PLAYING) {
|
||
|
|
ytStarted = 1;
|
||
|
|
self.fire('started', e);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (e.data === global__WEBPACK_IMPORTED_MODULE_0___default.a.YT.PlayerState.PLAYING) {
|
||
|
|
self.fire('play', e);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (e.data === global__WEBPACK_IMPORTED_MODULE_0___default.a.YT.PlayerState.PAUSED) {
|
||
|
|
self.fire('pause', e);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (e.data === global__WEBPACK_IMPORTED_MODULE_0___default.a.YT.PlayerState.ENDED) {
|
||
|
|
self.fire('ended', e);
|
||
|
|
} // progress check
|
||
|
|
|
||
|
|
|
||
|
|
if (e.data === global__WEBPACK_IMPORTED_MODULE_0___default.a.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);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onError: function onError(e) {
|
||
|
|
self.fire('error', e);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
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 global__WEBPACK_IMPORTED_MODULE_0___default.a.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 ('vimeo' === self.type) {
|
||
|
|
self.playerOptions = {
|
||
|
|
id: self.videoID,
|
||
|
|
autopause: 0,
|
||
|
|
transparent: 0,
|
||
|
|
autoplay: self.options.autoplay ? 1 : 0,
|
||
|
|
loop: self.options.loop ? 1 : 0,
|
||
|
|
muted: self.options.mute ? 1 : 0
|
||
|
|
};
|
||
|
|
|
||
|
|
if (self.options.volume) {
|
||
|
|
self.playerOptions.volume = self.options.volume;
|
||
|
|
} // hide controls
|
||
|
|
|
||
|
|
|
||
|
|
if (!self.options.showContols) {
|
||
|
|
self.playerOptions.badge = 0;
|
||
|
|
self.playerOptions.byline = 0;
|
||
|
|
self.playerOptions.portrait = 0;
|
||
|
|
self.playerOptions.title = 0;
|
||
|
|
self.playerOptions.background = 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!self.$video) {
|
||
|
|
var playerOptionsString = '';
|
||
|
|
Object.keys(self.playerOptions).forEach(function (key) {
|
||
|
|
if ('' !== playerOptionsString) {
|
||
|
|
playerOptionsString += '&';
|
||
|
|
}
|
||
|
|
|
||
|
|
playerOptionsString += "".concat(key, "=").concat(encodeURIComponent(self.playerOptions[key]));
|
||
|
|
}); // we need to create iframe manually because when we create it using API
|
||
|
|
// js events won't triggers after iframe moved to another place
|
||
|
|
|
||
|
|
self.$video = document.createElement('iframe');
|
||
|
|
self.$video.setAttribute('id', self.playerID);
|
||
|
|
self.$video.setAttribute('src', "https://player.vimeo.com/video/".concat(self.videoID, "?").concat(playerOptionsString));
|
||
|
|
self.$video.setAttribute('frameborder', '0');
|
||
|
|
self.$video.setAttribute('mozallowfullscreen', '');
|
||
|
|
self.$video.setAttribute('allowfullscreen', '');
|
||
|
|
hiddenDiv.appendChild(self.$video);
|
||
|
|
document.body.appendChild(hiddenDiv);
|
||
|
|
}
|
||
|
|
|
||
|
|
self.player = self.player || new global__WEBPACK_IMPORTED_MODULE_0___default.a.Vimeo.Player(self.$video, self.playerOptions); // set current time for autoplay
|
||
|
|
|
||
|
|
if (self.options.startTime && self.options.autoplay) {
|
||
|
|
self.player.setCurrentTime(self.options.startTime);
|
||
|
|
} // 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;
|
||
|
|
}); // events
|
||
|
|
|
||
|
|
var vmStarted;
|
||
|
|
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 && 0 === e.seconds) {
|
||
|
|
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);
|
||
|
|
});
|
||
|
|
self.player.on('error', function (e) {
|
||
|
|
self.fire('error', e);
|
||
|
|
});
|
||
|
|
} // Local
|
||
|
|
|
||
|
|
|
||
|
|
function addSourceToLocal(element, src, type) {
|
||
|
|
var source = document.createElement('source');
|
||
|
|
source.src = src;
|
||
|
|
source.type = type;
|
||
|
|
element.appendChild(source);
|
||
|
|
}
|
||
|
|
|
||
|
|
if ('local' === self.type) {
|
||
|
|
if (!self.$video) {
|
||
|
|
self.$video = document.createElement('video'); // show controls
|
||
|
|
|
||
|
|
if (self.options.showContols) {
|
||
|
|
self.$video.controls = true;
|
||
|
|
} // 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/".concat(key));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
self.player = self.player || self.$video;
|
||
|
|
var locStarted;
|
||
|
|
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);
|
||
|
|
});
|
||
|
|
self.player.addEventListener('error', function (e) {
|
||
|
|
self.fire('error', e);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
callback(self.$video);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: "init",
|
||
|
|
value: function init() {
|
||
|
|
var self = this;
|
||
|
|
self.playerID = "VideoWorker-".concat(self.ID);
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: "loadAPI",
|
||
|
|
value: function loadAPI() {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
if (YoutubeAPIadded && VimeoAPIadded) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var src = ''; // load Youtube API
|
||
|
|
|
||
|
|
if ('youtube' === self.type && !YoutubeAPIadded) {
|
||
|
|
YoutubeAPIadded = 1;
|
||
|
|
src = 'https://www.youtube.com/iframe_api';
|
||
|
|
} // load Vimeo API
|
||
|
|
|
||
|
|
|
||
|
|
if ('vimeo' === self.type && !VimeoAPIadded) {
|
||
|
|
VimeoAPIadded = 1; // Useful when Vimeo API added using RequireJS https://github.com/nk-o/video-worker/pull/7
|
||
|
|
|
||
|
|
if ('undefined' !== typeof global__WEBPACK_IMPORTED_MODULE_0___default.a.Vimeo) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
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 ('youtube' === self.type) {
|
||
|
|
// Listen for global YT player callback
|
||
|
|
if (('undefined' === typeof global__WEBPACK_IMPORTED_MODULE_0___default.a.YT || 0 === global__WEBPACK_IMPORTED_MODULE_0___default.a.YT.loaded) && !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 ('object' === _typeof(global__WEBPACK_IMPORTED_MODULE_0___default.a.YT) && 1 === global__WEBPACK_IMPORTED_MODULE_0___default.a.YT.loaded) {
|
||
|
|
callback();
|
||
|
|
} else {
|
||
|
|
loadingYoutubeDefer.done(function () {
|
||
|
|
callback();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
} // Vimeo
|
||
|
|
|
||
|
|
|
||
|
|
if ('vimeo' === self.type) {
|
||
|
|
if ('undefined' === typeof global__WEBPACK_IMPORTED_MODULE_0___default.a.Vimeo && !loadingVimeoPlayer) {
|
||
|
|
loadingVimeoPlayer = 1;
|
||
|
|
var vimeoInterval = setInterval(function () {
|
||
|
|
if ('undefined' !== typeof global__WEBPACK_IMPORTED_MODULE_0___default.a.Vimeo) {
|
||
|
|
clearInterval(vimeoInterval);
|
||
|
|
loadingVimeoDefer.resolve('done');
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
}, 20);
|
||
|
|
} else if ('undefined' !== typeof global__WEBPACK_IMPORTED_MODULE_0___default.a.Vimeo) {
|
||
|
|
callback();
|
||
|
|
} else {
|
||
|
|
loadingVimeoDefer.done(function () {
|
||
|
|
callback();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
} // Local
|
||
|
|
|
||
|
|
|
||
|
|
if ('local' === self.type) {
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}]);
|
||
|
|
|
||
|
|
return VideoWorker;
|
||
|
|
}();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ }),
|
||
|
|
/* 9 */
|
||
|
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
__webpack_require__.r(__webpack_exports__);
|
||
|
|
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return jarallaxVideo; });
|
||
|
|
/* harmony import */ var video_worker__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8);
|
||
|
|
/* harmony import */ var global__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
|
||
|
|
/* harmony import */ var global__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(global__WEBPACK_IMPORTED_MODULE_1__);
|
||
|
|
|
||
|
|
|
||
|
|
function jarallaxVideo() {
|
||
|
|
var jarallax = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : global__WEBPACK_IMPORTED_MODULE_1___default.a.jarallax;
|
||
|
|
|
||
|
|
if ('undefined' === typeof jarallax) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var Jarallax = jarallax.constructor; // append video after when block will be visible.
|
||
|
|
|
||
|
|
var defOnScroll = Jarallax.prototype.onScroll;
|
||
|
|
|
||
|
|
Jarallax.prototype.onScroll = function () {
|
||
|
|
var self = this;
|
||
|
|
defOnScroll.apply(self);
|
||
|
|
var isReady = !self.isVideoInserted && self.video && (!self.options.videoLazyLoading || self.isElementInViewport) && !self.options.disableVideo();
|
||
|
|
|
||
|
|
if (isReady) {
|
||
|
|
self.isVideoInserted = true;
|
||
|
|
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',
|
||
|
|
pointerEvents: 'none',
|
||
|
|
transformStyle: 'preserve-3d',
|
||
|
|
backfaceVisibility: 'hidden',
|
||
|
|
willChange: 'transform,opacity',
|
||
|
|
margin: 0,
|
||
|
|
zIndex: -1
|
||
|
|
});
|
||
|
|
self.$video = video; // add Poster attribute to self-hosted video
|
||
|
|
|
||
|
|
if ('local' === self.video.type) {
|
||
|
|
if (self.image.src) {
|
||
|
|
self.$video.setAttribute('poster', self.image.src);
|
||
|
|
} else if (self.image.$item && 'IMG' === self.image.$item.tagName && self.image.$item.src) {
|
||
|
|
self.$video.setAttribute('poster', self.image.$item.src);
|
||
|
|
}
|
||
|
|
} // insert video tag
|
||
|
|
|
||
|
|
|
||
|
|
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 && ('IFRAME' === node || 'VIDEO' === node)) {
|
||
|
|
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 ('IFRAME' === node) {
|
||
|
|
h += 400;
|
||
|
|
mt -= 200;
|
||
|
|
}
|
||
|
|
|
||
|
|
self.css(self.$video, {
|
||
|
|
width: "".concat(w, "px"),
|
||
|
|
marginLeft: "".concat(ml, "px"),
|
||
|
|
height: "".concat(h, "px"),
|
||
|
|
marginTop: "".concat(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;
|
||
|
|
} // Init video api
|
||
|
|
|
||
|
|
|
||
|
|
var video = new video_worker__WEBPACK_IMPORTED_MODULE_0__["default"](self.options.videoSrc, {
|
||
|
|
autoplay: true,
|
||
|
|
loop: self.options.videoLoop,
|
||
|
|
showContols: false,
|
||
|
|
startTime: self.options.videoStartTime || 0,
|
||
|
|
endTime: self.options.videoEndTime || 0,
|
||
|
|
mute: self.options.videoVolume ? 0 : 1,
|
||
|
|
volume: self.options.videoVolume || 0
|
||
|
|
});
|
||
|
|
|
||
|
|
function resetDefaultImage() {
|
||
|
|
if (self.image.$default_item) {
|
||
|
|
self.image.$item = self.image.$default_item;
|
||
|
|
self.image.$item.style.display = 'block'; // set image width and height
|
||
|
|
|
||
|
|
self.coverImage();
|
||
|
|
self.clipContainer();
|
||
|
|
self.onScroll();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (video.isValid()) {
|
||
|
|
// Force enable parallax.
|
||
|
|
// When the parallax disabled on mobile devices, we still need to display videos.
|
||
|
|
// https://github.com/nk-o/jarallax/issues/159
|
||
|
|
if (this.options.disableParallax()) {
|
||
|
|
defaultResult = true;
|
||
|
|
self.image.position = 'absolute';
|
||
|
|
self.options.type = 'scroll';
|
||
|
|
self.options.speed = 1;
|
||
|
|
} // 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(\"".concat(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.videoError && (self.options.videoLoop || !self.options.videoLoop && !self.videoEnded)) {
|
||
|
|
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.coverImage();
|
||
|
|
self.clipContainer();
|
||
|
|
self.onScroll(); // hide image
|
||
|
|
|
||
|
|
if (self.image.$default_item) {
|
||
|
|
self.image.$default_item.style.display = 'none';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
video.on('ended', function () {
|
||
|
|
self.videoEnded = true;
|
||
|
|
|
||
|
|
if (!self.options.videoLoop) {
|
||
|
|
// show default image if Loop disabled.
|
||
|
|
resetDefaultImage();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
video.on('error', function () {
|
||
|
|
self.videoError = true; // show default image if video loading error.
|
||
|
|
|
||
|
|
resetDefaultImage();
|
||
|
|
});
|
||
|
|
self.video = video; // set image if not exists
|
||
|
|
|
||
|
|
if (!self.defaultInitImgResult) {
|
||
|
|
// set empty image on self-hosted video if not defined
|
||
|
|
self.image.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
|
||
|
|
|
||
|
|
if ('local' !== video.type) {
|
||
|
|
video.getImageURL(function (url) {
|
||
|
|
self.image.bgImage = "url(\"".concat(url, "\")");
|
||
|
|
self.init();
|
||
|
|
});
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
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);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
/***/ })
|
||
|
|
/******/ ]);
|