Skip to content

Commit

Permalink
remove path extension and fix posterType issue
Browse files Browse the repository at this point in the history
  • Loading branch information
amazingSurge authored and amazingSurge committed Sep 19, 2014
1 parent 704f642 commit c2a4cf0
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 36 deletions.
52 changes: 37 additions & 15 deletions dist/jquery.vide.js
Original file line number Diff line number Diff line change
Expand Up @@ -129,14 +129,10 @@
callback(this.src);
};

if(typeof path === "object" && path.poster){
callback(path.poster);
} else {
$("<img src='" + path + ".gif'>").load(onLoad);
$("<img src='" + path + ".jpg'>").load(onLoad);
$("<img src='" + path + ".jpeg'>").load(onLoad);
$("<img src='" + path + ".png'>").load(onLoad);
}
$("<img src='" + path + ".gif'>").load(onLoad);
$("<img src='" + path + ".jpg'>").load(onLoad);
$("<img src='" + path + ".jpeg'>").load(onLoad);
$("<img src='" + path + ".png'>").load(onLoad);
};

/**
Expand All @@ -154,6 +150,10 @@
// remove extension
if(typeof path === "string"){
path = path.replace(/\.\w*$/, "");
} else if(typeof path === "object") {
for(var i in path){
path[i] = path[i].replace(/\.\w*$/, "");
}
}

this.settings = $.extend({}, defaults, options);
Expand Down Expand Up @@ -188,13 +188,27 @@
"background-position": position.x + " " + position.y
});

// Get poster path
var poster = this.path;
if(typeof this.path === "object"){
if(this.path.poster){
poster = this.path.poster;
} else {
if(this.path.mp4) {
poster = this.path.mp4;
} else if(this.path.webm) {
poster = this.path.webm;
} else if(this.path.ogv) {
poster = this.path.webm;
}
}
}

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

// if parent element has a static position, make it relative
Expand All @@ -209,13 +223,13 @@
if(typeof this.path === "object"){
var sources = "";
if(this.path.mp4) {
sources += "<source src='" + this.path.mp4 + "' type='video/mp4'>";
sources += "<source src='" + this.path.mp4 + ".mp4' type='video/mp4'>";
}
if(this.path.webm) {
sources += "<source src='" + this.path.webm + "' type='video/webm'>";
sources += "<source src='" + this.path.webm + ".webm' type='video/webm'>";
}
if(this.path.ogv) {
sources += "<source src='" + this.path.ogv + "' type='video/ogv'>";
sources += "<source src='" + this.path.ogv + ".ogv' type='video/ogv'>";
}
this.video = $("<video>" + sources + "</video>");
} else {
Expand Down Expand Up @@ -267,6 +281,14 @@
}
};


/**
* Set Poster for the video
*/
Vide.prototype.setPoster = function (url) {
this.wrapper.css("background-image", "url(" + url + ")");
};

/**
* Get video element of the background
* @returns {HTMLVideoElement}
Expand Down
2 changes: 1 addition & 1 deletion dist/jquery.vide.min.js

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

10 changes: 5 additions & 5 deletions examples/block-bg.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<!-- Easy as hell -->
<div id="block" style="width: 100%; height: 500px;" data-vide-bg="video/ocean" data-vide-options="position: 0% 50%"></div>

<div id="block2" style="width: 100%; height: 500px;" data-vide-bg='{"mp4": "video/ocean.mp4", "webm": "video/ocean.webm", "ogv": "video/ocean.ogv", "poster": "video/ocean.jpg"}' data-vide-options="position: 0% 50%"></div>
<div id="block2" style="width: 100%; height: 500px;" data-vide-bg='{"mp4": "video/ocean", "webm": "video/ocean", "ogv": "video/ocean", "poster": "video/ocean"}' data-vide-options="position: 0% 50%"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../libs/jquery/jquery-1.11.1.min.js"><\/script>')</script>
Expand All @@ -27,10 +27,10 @@
// instance.destroy(); // Destroy instance
//
// $("#block2").vide({
// 'mp4': 'video/ocean.mp4',
// 'webm': 'video/ocean.webm',
// 'ogv': 'video/ocean.ogv',
// 'poster': 'video/ocean.jpg',
// 'mp4': 'video/ocean',
// 'webm': 'video/ocean',
// 'ogv': 'video/ocean',
// 'poster': 'video/ocean',
// });
// });
</script>
Expand Down
52 changes: 37 additions & 15 deletions src/jquery.vide.js
Original file line number Diff line number Diff line change
Expand Up @@ -121,14 +121,10 @@
callback(this.src);
};

if(typeof path === "object" && path.poster){
callback(path.poster);
} else {
$("<img src='" + path + ".gif'>").load(onLoad);
$("<img src='" + path + ".jpg'>").load(onLoad);
$("<img src='" + path + ".jpeg'>").load(onLoad);
$("<img src='" + path + ".png'>").load(onLoad);
}
$("<img src='" + path + ".gif'>").load(onLoad);
$("<img src='" + path + ".jpg'>").load(onLoad);
$("<img src='" + path + ".jpeg'>").load(onLoad);
$("<img src='" + path + ".png'>").load(onLoad);
};

/**
Expand All @@ -146,6 +142,10 @@
// remove extension
if(typeof path === "string"){
path = path.replace(/\.\w*$/, "");
} else if(typeof path === "object") {
for(var i in path){
path[i] = path[i].replace(/\.\w*$/, "");
}
}

this.settings = $.extend({}, defaults, options);
Expand Down Expand Up @@ -180,13 +180,27 @@
"background-position": position.x + " " + position.y
});

// Get poster path
var poster = this.path;
if(typeof this.path === "object"){
if(this.path.poster){
poster = this.path.poster;
} else {
if(this.path.mp4) {
poster = this.path.mp4;
} else if(this.path.webm) {
poster = this.path.webm;
} else if(this.path.ogv) {
poster = this.path.webm;
}
}
}

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

// if parent element has a static position, make it relative
Expand All @@ -201,13 +215,13 @@
if(typeof this.path === "object"){
var sources = "";
if(this.path.mp4) {
sources += "<source src='" + this.path.mp4 + "' type='video/mp4'>";
sources += "<source src='" + this.path.mp4 + ".mp4' type='video/mp4'>";
}
if(this.path.webm) {
sources += "<source src='" + this.path.webm + "' type='video/webm'>";
sources += "<source src='" + this.path.webm + ".webm' type='video/webm'>";
}
if(this.path.ogv) {
sources += "<source src='" + this.path.ogv + "' type='video/ogv'>";
sources += "<source src='" + this.path.ogv + ".ogv' type='video/ogv'>";
}
this.video = $("<video>" + sources + "</video>");
} else {
Expand Down Expand Up @@ -259,6 +273,14 @@
}
};


/**
* Set Poster for the video
*/
Vide.prototype.setPoster = function (url) {
this.wrapper.css("background-image", "url(" + url + ")");
};

/**
* Get video element of the background
* @returns {HTMLVideoElement}
Expand Down

0 comments on commit c2a4cf0

Please sign in to comment.