first
This commit is contained in:
327
wp-content/plugins/slider-bws/js/owl.carousel/owl.video.js
Normal file
327
wp-content/plugins/slider-bws/js/owl.carousel/owl.video.js
Normal file
@ -0,0 +1,327 @@
|
||||
/**
|
||||
* Video Plugin
|
||||
* @version 2.3.4
|
||||
* @author Bartosz Wojciechowski
|
||||
* @author David Deutsch
|
||||
* @license The MIT License (MIT)
|
||||
*/
|
||||
;(function($, window, document, undefined) {
|
||||
|
||||
/**
|
||||
* Creates the video plugin.
|
||||
* @class The Video Plugin
|
||||
* @param {Owl} carousel - The Owl Carousel
|
||||
*/
|
||||
var Video = function(carousel) {
|
||||
/**
|
||||
* Reference to the core.
|
||||
* @protected
|
||||
* @type {Owl}
|
||||
*/
|
||||
this._core = carousel;
|
||||
|
||||
/**
|
||||
* Cache all video URLs.
|
||||
* @protected
|
||||
* @type {Object}
|
||||
*/
|
||||
this._videos = {};
|
||||
|
||||
/**
|
||||
* Current playing item.
|
||||
* @protected
|
||||
* @type {jQuery}
|
||||
*/
|
||||
this._playing = null;
|
||||
|
||||
/**
|
||||
* All event handlers.
|
||||
* @todo The cloned content removale is too late
|
||||
* @protected
|
||||
* @type {Object}
|
||||
*/
|
||||
this._handlers = {
|
||||
'initialized.owl.carousel': $.proxy(function(e) {
|
||||
if (e.namespace) {
|
||||
this._core.register({ type: 'state', name: 'playing', tags: [ 'interacting' ] });
|
||||
}
|
||||
}, this),
|
||||
'resize.owl.carousel': $.proxy(function(e) {
|
||||
if (e.namespace && this._core.settings.video && this.isInFullScreen()) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}, this),
|
||||
'refreshed.owl.carousel': $.proxy(function(e) {
|
||||
if (e.namespace && this._core.is('resizing')) {
|
||||
this._core.$stage.find('.cloned .owl-video-frame').remove();
|
||||
}
|
||||
}, this),
|
||||
'changed.owl.carousel': $.proxy(function(e) {
|
||||
if (e.namespace && e.property.name === 'position' && this._playing) {
|
||||
this.stop();
|
||||
}
|
||||
}, this),
|
||||
'prepared.owl.carousel': $.proxy(function(e) {
|
||||
if (!e.namespace) {
|
||||
return;
|
||||
}
|
||||
|
||||
var $element = $(e.content).find('.owl-video');
|
||||
|
||||
if ($element.length) {
|
||||
$element.css('display', 'none');
|
||||
this.fetch($element, $(e.content));
|
||||
}
|
||||
}, this)
|
||||
};
|
||||
|
||||
// set default options
|
||||
this._core.options = $.extend({}, Video.Defaults, this._core.options);
|
||||
|
||||
// register event handlers
|
||||
this._core.$element.on(this._handlers);
|
||||
|
||||
this._core.$element.on('click.owl.video', '.owl-video-play-icon', $.proxy(function(e) {
|
||||
this.play(e);
|
||||
}, this));
|
||||
};
|
||||
|
||||
/**
|
||||
* Default options.
|
||||
* @public
|
||||
*/
|
||||
Video.Defaults = {
|
||||
video: false,
|
||||
videoHeight: false,
|
||||
videoWidth: false
|
||||
};
|
||||
|
||||
/**
|
||||
* Gets the video ID and the type (YouTube/Vimeo/vzaar only).
|
||||
* @protected
|
||||
* @param {jQuery} target - The target containing the video data.
|
||||
* @param {jQuery} item - The item containing the video.
|
||||
*/
|
||||
Video.prototype.fetch = function(target, item) {
|
||||
var type = (function() {
|
||||
if (target.attr('data-vimeo-id')) {
|
||||
return 'vimeo';
|
||||
} else if (target.attr('data-vzaar-id')) {
|
||||
return 'vzaar'
|
||||
} else {
|
||||
return 'youtube';
|
||||
}
|
||||
})(),
|
||||
id = target.attr('data-vimeo-id') || target.attr('data-youtube-id') || target.attr('data-vzaar-id'),
|
||||
width = target.attr('data-width') || this._core.settings.videoWidth,
|
||||
height = target.attr('data-height') || this._core.settings.videoHeight,
|
||||
url = target.attr('href');
|
||||
|
||||
if (url) {
|
||||
|
||||
/*
|
||||
Parses the id's out of the following urls (and probably more):
|
||||
https://www.youtube.com/watch?v=:id
|
||||
https://youtu.be/:id
|
||||
https://vimeo.com/:id
|
||||
https://vimeo.com/channels/:channel/:id
|
||||
https://vimeo.com/groups/:group/videos/:id
|
||||
https://app.vzaar.com/videos/:id
|
||||
|
||||
Visual example: https://regexper.com/#(http%3A%7Chttps%3A%7C)%5C%2F%5C%2F(player.%7Cwww.%7Capp.)%3F(vimeo%5C.com%7Cyoutu(be%5C.com%7C%5C.be%7Cbe%5C.googleapis%5C.com)%7Cvzaar%5C.com)%5C%2F(video%5C%2F%7Cvideos%5C%2F%7Cembed%5C%2F%7Cchannels%5C%2F.%2B%5C%2F%7Cgroups%5C%2F.%2B%5C%2F%7Cwatch%5C%3Fv%3D%7Cv%5C%2F)%3F(%5BA-Za-z0-9._%25-%5D*)(%5C%26%5CS%2B)%3F
|
||||
*/
|
||||
|
||||
id = url.match(/(http:|https:|)\/\/(player.|www.|app.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com|be\-nocookie\.com)|vzaar\.com)\/(video\/|videos\/|embed\/|channels\/.+\/|groups\/.+\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?/);
|
||||
|
||||
if (id[3].indexOf('youtu') > -1) {
|
||||
type = 'youtube';
|
||||
} else if (id[3].indexOf('vimeo') > -1) {
|
||||
type = 'vimeo';
|
||||
} else if (id[3].indexOf('vzaar') > -1) {
|
||||
type = 'vzaar';
|
||||
} else {
|
||||
throw new Error('Video URL not supported.');
|
||||
}
|
||||
id = id[6];
|
||||
} else {
|
||||
throw new Error('Missing video URL.');
|
||||
}
|
||||
|
||||
this._videos[url] = {
|
||||
type: type,
|
||||
id: id,
|
||||
width: width,
|
||||
height: height
|
||||
};
|
||||
|
||||
item.attr('data-video', url);
|
||||
|
||||
this.thumbnail(target, this._videos[url]);
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates video thumbnail.
|
||||
* @protected
|
||||
* @param {jQuery} target - The target containing the video data.
|
||||
* @param {Object} info - The video info object.
|
||||
* @see `fetch`
|
||||
*/
|
||||
Video.prototype.thumbnail = function(target, video) {
|
||||
var tnLink,
|
||||
icon,
|
||||
path,
|
||||
dimensions = video.width && video.height ? 'width:' + video.width + 'px;height:' + video.height + 'px;' : '',
|
||||
customTn = target.find('img'),
|
||||
srcType = 'src',
|
||||
lazyClass = '',
|
||||
settings = this._core.settings,
|
||||
create = function(path) {
|
||||
icon = '<div class="owl-video-play-icon"></div>';
|
||||
|
||||
if (settings.lazyLoad) {
|
||||
tnLink = $('<div/>',{
|
||||
"class": 'owl-video-tn ' + lazyClass,
|
||||
"srcType": path
|
||||
});
|
||||
} else {
|
||||
tnLink = $( '<div/>', {
|
||||
"class": "owl-video-tn",
|
||||
"style": 'opacity:1;background-image:url(' + path + ')'
|
||||
});
|
||||
}
|
||||
target.after(tnLink);
|
||||
target.after(icon);
|
||||
};
|
||||
|
||||
// wrap video content into owl-video-wrapper div
|
||||
target.wrap( $( '<div/>', {
|
||||
"class": "owl-video-wrapper",
|
||||
"style": dimensions
|
||||
}));
|
||||
|
||||
if (this._core.settings.lazyLoad) {
|
||||
srcType = 'data-src';
|
||||
lazyClass = 'owl-lazy';
|
||||
}
|
||||
|
||||
// custom thumbnail
|
||||
if (customTn.length) {
|
||||
create(customTn.attr(srcType));
|
||||
customTn.remove();
|
||||
return false;
|
||||
}
|
||||
|
||||
if (video.type === 'youtube') {
|
||||
path = "//img.youtube.com/vi/" + video.id + "/hqdefault.jpg";
|
||||
create(path);
|
||||
} else if (video.type === 'vimeo') {
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: '//vimeo.com/api/v2/video/' + video.id + '.json',
|
||||
jsonp: 'callback',
|
||||
dataType: 'jsonp',
|
||||
success: function(data) {
|
||||
path = data[0].thumbnail_large;
|
||||
create(path);
|
||||
}
|
||||
});
|
||||
} else if (video.type === 'vzaar') {
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: '//vzaar.com/api/videos/' + video.id + '.json',
|
||||
jsonp: 'callback',
|
||||
dataType: 'jsonp',
|
||||
success: function(data) {
|
||||
path = data.framegrab_url;
|
||||
create(path);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Stops the current video.
|
||||
* @public
|
||||
*/
|
||||
Video.prototype.stop = function() {
|
||||
this._core.trigger('stop', null, 'video');
|
||||
this._playing.find('.owl-video-frame').remove();
|
||||
this._playing.removeClass('owl-video-playing');
|
||||
this._playing = null;
|
||||
this._core.leave('playing');
|
||||
this._core.trigger('stopped', null, 'video');
|
||||
};
|
||||
|
||||
/**
|
||||
* Starts the current video.
|
||||
* @public
|
||||
* @param {Event} event - The event arguments.
|
||||
*/
|
||||
Video.prototype.play = function(event) {
|
||||
var target = $(event.target),
|
||||
item = target.closest('.' + this._core.settings.itemClass),
|
||||
video = this._videos[item.attr('data-video')],
|
||||
width = video.width || '100%',
|
||||
height = video.height || this._core.$stage.height(),
|
||||
html,
|
||||
iframe;
|
||||
|
||||
if (this._playing) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._core.enter('playing');
|
||||
this._core.trigger('play', null, 'video');
|
||||
|
||||
item = this._core.items(this._core.relative(item.index()));
|
||||
|
||||
this._core.reset(item.index());
|
||||
|
||||
html = $( '<iframe frameborder="0" allowfullscreen mozallowfullscreen webkitAllowFullScreen ></iframe>' );
|
||||
html.attr( 'height', height );
|
||||
html.attr( 'width', width );
|
||||
if (video.type === 'youtube') {
|
||||
html.attr( 'src', '//www.youtube.com/embed/' + video.id + '?autoplay=1&rel=0&v=' + video.id );
|
||||
} else if (video.type === 'vimeo') {
|
||||
html.attr( 'src', '//player.vimeo.com/video/' + video.id + '?autoplay=1' );
|
||||
} else if (video.type === 'vzaar') {
|
||||
html.attr( 'src', '//view.vzaar.com/' + video.id + '/player?autoplay=true' );
|
||||
}
|
||||
|
||||
iframe = $(html).wrap( '<div class="owl-video-frame" />' ).insertAfter(item.find('.owl-video'));
|
||||
|
||||
this._playing = item.addClass('owl-video-playing');
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks whether an video is currently in full screen mode or not.
|
||||
* @todo Bad style because looks like a readonly method but changes members.
|
||||
* @protected
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
Video.prototype.isInFullScreen = function() {
|
||||
var element = document.fullscreenElement || document.mozFullScreenElement ||
|
||||
document.webkitFullscreenElement;
|
||||
|
||||
return element && $(element).parent().hasClass('owl-video-frame');
|
||||
};
|
||||
|
||||
/**
|
||||
* Destroys the plugin.
|
||||
*/
|
||||
Video.prototype.destroy = function() {
|
||||
var handler, property;
|
||||
|
||||
this._core.$element.off('click.owl.video');
|
||||
|
||||
for (handler in this._handlers) {
|
||||
this._core.$element.off(handler, this._handlers[handler]);
|
||||
}
|
||||
for (property in Object.getOwnPropertyNames(this)) {
|
||||
typeof this[property] != 'function' && (this[property] = null);
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.owlCarousel.Constructor.Plugins.Video = Video;
|
||||
|
||||
})(window.Zepto || window.jQuery, window, document);
|
||||
Reference in New Issue
Block a user