Merge branch 'hibernius-topic-vzaar-video' into develop

Closes PR OwlCarousel2#872

docs_src/data/options.json

@@ -219,7 +219,7 @@
     "name":     "video",
     "type":     "Boolean",
     "Default":  "false",
-    "desc":     "Enable fetching YouTube/Vimeo videos."
+    "desc":     "Enable fetching YouTube/Vimeo/Vzaar videos."
   },
   {
     "name":     "videoHeight",

docs_src/templates/pages/demos/video.hbs

@@ -2,10 +2,10 @@
 title: Video Demo
 subTitle: Video
 nav: demos
-description: Owl Carousel supports YouTube and Vimeo videos
+description: Owl Carousel supports YouTube, Vimeo, and vzaar videos
 sort: 2
 
-tags: 
+tags:
 - demo
 - plugin
 ---
@@ -28,7 +28,7 @@ Enable video option:
 ```
 video:true
 ```
-To add video into carousel just put `<a class="owl-video" href="_straight URL from youtube or vimeo"></a>`.
+To add video into carousel just put `<a class="owl-video" href="_straight URL from YouTube, Vimeo, or vzaar"></a>`.
 
 A tag is not mandatory, it can be any other tag but "owl-video" and href with url link is required.
 
@@ -74,7 +74,7 @@ videoHeight: false, // Default false; Type: Boolean/Number
 </div>
 ```
 
-{{/markdown }} 
+{{/markdown }}
 
 <script>
 $(document).ready(function(){
@@ -96,4 +96,4 @@ $(document).ready(function(){
 		}
 	})
 })
-</script>
+</script>

docs_src/templates/pages/docs/dev-buildin-plugins.hbs

@@ -11,7 +11,7 @@ tags:
 
 {{#markdown }}
 ## Build-in Plugins
-> Owl Carousel supports plugin modular structure. This means that you can remove plugins that you won’t use or create new ones that fit your needs 
+> Owl Carousel supports plugin modular structure. This means that you can remove plugins that you won’t use or create new ones that fit your needs
 
 
 
@@ -43,11 +43,11 @@ Big thanks to [Artus Kolanowski](https://github.com/witrin) for helping me with
 
 
 
-{{!-- 
+{{!--
 
 ## owl.lazyload.js
 
-LazyLoad require `class="owl-lazy"` and link to image inside data: data-src="url_to_img" or/and data-src-retina="url_to_highres_img". 
+LazyLoad require `class="owl-lazy"` and link to image inside data: data-src="url_to_img" or/and data-src-retina="url_to_highres_img".
 There is also option to load images into background but this needs to be tested. [See demo](/demos/demo.html)
 
 Usage:
@@ -68,9 +68,9 @@ HTML Markup:
 
 ## owl.video.js
 
-Currently support YouTube and Vimeo videos only.
+Currently support YouTube, Vimeo, and vzaar videos only.
 
-To add video into carousel just put `<a class="owl-video" href="_straight URL from youtube or vimeo"></a>`.
+To add video into carousel just put `<a class="owl-video" href="_straight URL from YouTube, Vimeo, or vzaar"></a>`.
 A tag is not mandatory, can be any other tag but `"owl-video"` and href with url link is required.
 
 Thumbnails are automaticaly fetched from servers. [See demo](/demos/demo.html)
@@ -101,13 +101,13 @@ Adjusts stage height to highest element on viewport. No special HTML markup requ
 ```
 $('.owl-carousel').owlCarousel({
 	autoHeight:true,
-	autoHeightClass: 'owl-height' //default 
+	autoHeightClass: 'owl-height' //default
 });
 ```
 
 ## owl.animate.js
 
-Owl Carousel CSS has build-in only fade out tranisiton. To get more fancy looking animations you have to create them yourself in CSS or use fantastic Animate.css library created by Daniel Eden http://daneden.github.io/animate.css/ 
+Owl Carousel CSS has build-in only fade out tranisiton. To get more fancy looking animations you have to create them yourself in CSS or use fantastic Animate.css library created by Daniel Eden http://daneden.github.io/animate.css/
 Animate functions works only with one item and only in browsers that support perspective property.
 
 To get fade out effect just set `animateOut: 'fadeOut'`

docs_src/templates/pages/docs/started-welcome.hbs

@@ -26,7 +26,7 @@ tags:
 * Various Widths
 * Callback Events
 * RTL
-* YouTube/Vimeo support (fetching thumbnails as well)
+* YouTube/Vimeo/vzaar support (fetching thumbnails as well)
 * Anchors navigation
 * Merged Items
 * and more...

src/css/owl.animate.css

@@ -1,4 +1,4 @@
-/*
+/* 
  *  Owl Carousel - Animate Plugin
  */
 .owl-carousel .animated {

src/js/owl.video.js

@@ -96,25 +96,35 @@
 	};
 
 	/**
-	 * Gets the video ID and the type (YouTube/Vimeo only).
+	 * 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 = target.attr('data-vimeo-id') ? 'vimeo' : 'youtube',
-			id = target.attr('data-vimeo-id') || target.attr('data-youtube-id'),
-			width = target.attr('data-width') || this._core.settings.videoWidth,
-			height = target.attr('data-height') || this._core.settings.videoHeight,
-			url = target.attr('href');
+			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) {
-			id = url.match(/(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?/);
+			id = url.match(/(http:|https:|)\/\/(player.|www.|app.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com)|vzaar\.com)\/(video\/|videos\/|embed\/|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.');
 			}
@@ -192,6 +202,17 @@
 					create(path);
 				}
 			});
+		} else if (video.type === 'vzaar') {
+			$.ajax({
+				type: 'GET',
+				url: 'http://vzaar.com/api/videos/' + video.id + '.json',
+				jsonp: 'callback',
+				dataType: 'jsonp',
+				success: function(data) {
+					path = data.framegrab_url;
+					create(path);
+				}
+			});
 		}
 	};
 
@@ -239,6 +260,10 @@
 			html = '<iframe src="http://player.vimeo.com/video/' + video.id +
 				'?autoplay=1" width="' + width + '" height="' + height +
 				'" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
+		} else if (video.type === 'vzaar') {
+			html = '<iframe frameborder="0"' + 'height="' + height + '"' + 'width="' + width +
+				'" allowfullscreen mozallowfullscreen webkitAllowFullScreen ' +
+				'src="//view.vzaar.com/' + video.id + '/player?autoplay=true"></iframe>';
 		}
 
 		$('<div class="owl-video-frame">' + html + '</div>').insertAfter(item.find('.owl-video'));