Skip to content

Commit

Permalink
Release v0.2.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@vodkabears
vodkabears committed Oct 26, 2014
1 parent 2badb30 commit 28001f6
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 66 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vide",
"version": "0.1.4",
"version": "0.2.0",
"homepage": "http://vodkabears.github.io/vide/",
"authors": [
"Ilya Makarov <[email protected]>"
Expand Down
125 changes: 63 additions & 62 deletions dist/jquery.vide.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
/*
* Vide - v0.1.4
* Vide - v0.2.0
* Easy as hell jQuery plugin for video backgrounds.
* http://vodkabears.github.io/vide/
*
* Made by Ilya Makarov
* Under MIT License
*/
;(function ($, window, document, navigator) {
;(function($, window, document, navigator) {
"use strict";

/**
Expand All @@ -22,46 +22,34 @@
autoplay: true,
position: "50% 50%",
posterType: "detect"
};
},

/**
* Is iOs or Android?
* @private
*/
var iOS = /iPad|iPhone|iPod/i.test(navigator.userAgent),
android = /Android/i.test(navigator.userAgent);
// is iOs?
isIOS = /iPad|iPhone|iPod/i.test(navigator.userAgent),

/**
* Special plugin object for instances.
* @type {Object}
* @public
*/
$[pluginName] = {
lookup: []
};
// is Android?
isAndroid = /Android/i.test(navigator.userAgent);

/**
* Parse string with options
* @param {String} str
* @returns {Object|String}
* @private
*/
var parseOptions = function (str) {
var obj = {}, arr;
function parseOptions(str) {
var obj = {}, arr, i, len, prop, val, delimiterIndex, option;

// remove spaces around delimiters and split
arr = str.replace(/\s*:\s*/g, ":").replace(/\s*,\s*/g, ",").split(",");

// parse string
var i, len, prop, val, delimiterIndex, option;
for (i = 0, len = arr.length; i < len; i++) {
option = arr[i];

// Ignore urls and string without colon delimiters
if (
option.search(/^(http|https|ftp):\/\//) !== -1 ||
option.search(":") === -1
) {
if (option.search(/^(http|https|ftp):\/\//) !== -1 ||
option.search(":") === -1)
{
break;
}

Expand Down Expand Up @@ -93,23 +81,24 @@
}

return obj;
};
}

/**
* Parse position option
* @param {String} str
* @returns {Object}
* @private
*/
var parsePosition = function (str) {
function parsePosition(str) {
// convert anything to the string
str = "" + str;

// default value is a center
var args = str.split(/\s+/),
x = "50%", y = "50%";
x = "50%", y = "50%",
i, len, arg;

for (var i = 0, len = args.length, arg; i < len; i++) {
for (i = 0, len = args.length; i < len; i++) {
arg = args[i];

// convert values
Expand All @@ -121,7 +110,7 @@
y = "0%";
} else if (arg === "bottom") {
y = "100%";
} else if (arg === "center"){
} else if (arg === "center") {
if (i === 0) {
x = "50%";
} else {
Expand All @@ -137,24 +126,24 @@
}

return { x: x, y: y };
};
}

/**
* Search poster
* @param {String} path
* @param {Function} callback
* @private
*/
var findPoster = function (path, callback) {
var onLoad = function () {
function findPoster(path, callback) {
var onLoad = function() {
callback(this.src);
};

$("<img src='" + path + ".gif'>").load(onLoad);
$("<img src='" + path + ".jpg'>").load(onLoad);
$("<img src='" + path + ".jpeg'>").load(onLoad);
$("<img src='" + path + ".png'>").load(onLoad);
};
}

/**
* Vide constructor
Expand Down Expand Up @@ -201,14 +190,14 @@
* Initialization
* @public
*/
Vide.prototype.init = function () {
var that = this;

this.wrapper = $("<div>");
Vide.prototype.init = function() {
var that = this,
position = parsePosition(this.settings.position),
poster,
sources;

// Set video wrapper styles
var position = parsePosition(this.settings.position);
this.wrapper.css({
this.wrapper = $("<div>").css({
"position": "absolute",
"z-index": -1,
"top": 0,
Expand All @@ -225,7 +214,7 @@
});

// Get poster path
var poster = this.path;
poster = this.path;
if (typeof this.path === "object") {
if (this.path.poster) {
poster = this.path.poster;
Expand All @@ -242,11 +231,12 @@

// Set video poster
if (this.settings.posterType === "detect") {
findPoster(poster, function (url) {
findPoster(poster, function(url) {
that.wrapper.css("background-image", "url(" + url + ")");
});
} else if (this.settings.posterType !== "none") {
this.wrapper.css("background-image", "url(" + poster + "." + this.settings.posterType + ")");
this.wrapper
.css("background-image", "url(" + poster + "." + this.settings.posterType + ")");
}

// if parent element has a static position, make it relative
Expand All @@ -256,19 +246,20 @@

this.element.prepend(this.wrapper);

if (!iOS && !android) {
if (!isIOS && !isAndroid) {
sources = "";

if (typeof this.path === "object") {
var sources = "";
if (this.path.mp4) {
sources += "<source src='" + this.path.mp4 + ".mp4' type='video/mp4'>";
}
if(this.path.webm) {
if (this.path.webm) {
sources += "<source src='" + this.path.webm + ".webm' type='video/webm'>";
}
if(this.path.ogv) {
if (this.path.ogv) {
sources += "<source src='" + this.path.ogv + ".ogv' type='video/ogv'>";
}

this.video = $("<video>" + sources + "</video>");
} else {
this.video = $("<video>" +
Expand Down Expand Up @@ -306,14 +297,14 @@
});

// resize video, when it's loaded
this.video.bind("loadedmetadata." + pluginName, function () {
this.video.bind("loadedmetadata." + pluginName, function() {
that.video.css("visibility", "visible");
that.resize();
});

// resize event is available only for 'window',
// use another code solutions to detect DOM elements resizing
$(this.element).bind("resize." + pluginName, function () {
$(this.element).bind("resize." + pluginName, function() {
that.resize();
});
}
Expand All @@ -324,25 +315,26 @@
* @returns {HTMLVideoElement|null}
* @public
*/
Vide.prototype.getVideoObject = function () {
Vide.prototype.getVideoObject = function() {
return this.video ? this.video[0] : null;
};

/**
* Resize video background
* @public
*/
Vide.prototype.resize = function () {
Vide.prototype.resize = function() {
if (!this.video) {
return;
}

// get native video size
var videoHeight = this.video[0].videoHeight,
videoWidth = this.video[0].videoWidth;
var
// get native video size
videoHeight = this.video[0].videoHeight,
videoWidth = this.video[0].videoWidth,

// get wrapper size
var wrapperHeight = this.wrapper.height(),
// get wrapper size
wrapperHeight = this.wrapper.height(),
wrapperWidth = this.wrapper.width();

if (wrapperWidth / videoWidth > wrapperHeight / videoHeight) {
Expand All @@ -362,27 +354,36 @@
* Destroy video background
* @public
*/
Vide.prototype.destroy = function () {
Vide.prototype.destroy = function() {
this.element.unbind(pluginName);
if (this.video) {
this.video.unbind(pluginName);
}

delete $[pluginName].lookup[this.index];
this.element.removeData(pluginName);
this.wrapper.remove();
};

/**
* Special plugin object for instances.
* @type {Object}
* @public
*/
$[pluginName] = {
lookup: []
};

/**
* Plugin constructor
* @param {Object|String} path
* @param {Object|String} options
* @returns {JQuery}
* @constructor
*/
$.fn[pluginName] = function (path, options) {
$.fn[pluginName] = function(path, options) {
var instance;
this.each(function () {
this.each(function() {
instance = $.data(this, pluginName);
if (instance) {
// destroy plugin instance if exists
Expand All @@ -397,9 +398,9 @@
return this;
};

$(document).ready(function () {
$(document).ready(function() {
// window resize event listener
$(window).bind("resize." + pluginName, function () {
$(window).bind("resize." + pluginName, function() {
for (var len = $[pluginName].lookup.length, instance, i = 0; i < len; i++) {
instance = $[pluginName].lookup[i];
if (instance) {
Expand All @@ -412,7 +413,7 @@
// Add 'data-vide-bg' attribute with a path to the video without extension.
// Also you can pass options throw the 'data-vide-options' attribute.
// 'data-vide-options' must be like "muted: false, volume: 0.5".
$(document).find("[data-" + pluginName + "-bg]").each(function (i, element) {
$(document).find("[data-" + pluginName + "-bg]").each(function(i, element) {
var $element = $(element),
options = $element.data(pluginName + "-options"),
path = $element.data(pluginName + "-bg");
Expand Down
4 changes: 2 additions & 2 deletions dist/jquery.vide.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion vide.jquery.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"responsive",
"declarative"
],
"version": "0.1.4",
"version": "0.2.0",
"author": {
"name": "Ilya Makarov",
"email": "[email protected]",
Expand Down

0 comments on commit 28001f6

Please sign in to comment.