328 lines
8.7 KiB
JavaScript
328 lines
8.7 KiB
JavaScript
|
/**
|
||
|
|
* 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);
|