markus/photofloat
1
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Use Modernizr to check for <video> support and show an error messag if absent.

Browse Source
This commit is contained in:
Jerome Charaoui 2014-01-28 01:18:30 -05:00
parent 80060b37c1
commit 471e0eb820
4 changed files with 1422 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/css/000-controls.css
View File

@ -199,6 +199,14 @@ a:hover {
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
} }
#video-unsupported {
background-image: url(../img/video-unsupported.png);
background-position: top center;
background-repeat: no-repeat;
padding-top: 96px;
}
#auth-text input { #auth-text input {
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
background-color: rgb(200, 200, 200); background-color: rgb(200, 200, 200);

BIN
web/img/video-unsupported.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

1393
web/js/005-modernizr.js Normal file
View File

File diff suppressed because it is too large Load Diff

17
web/js/011-display.js
View File

@ -147,7 +147,8 @@ $(document).ready(function() {
$("#album-view").removeClass("photo-view-container"); $("#album-view").removeClass("photo-view-container");
$("#subalbums").show(); $("#subalbums").show();
$("#photo-view").hide(); $("#photo-view").hide();
$("#video").remove(); $("#video-box-inner").empty();
$("#video-box").hide();
} }
setTimeout(scrollToThumb, 1); setTimeout(scrollToThumb, 1);
} }
@ -182,10 +183,17 @@ $(document).ready(function() {
} }
function showPhoto() { function showPhoto() {
var width, height, photoSrc, videoSrc, previousPhoto, nextPhoto, nextLink, text; var width, height, photoSrc, videoSrc, previousPhoto, nextPhoto, nextLink, text;
if (currentPhoto.mediaType == "video") {
width = currentPhoto.size[0]; width = currentPhoto.size[0];
height = currentPhoto.size[1]; height = currentPhoto.size[1];
if (currentPhoto.mediaType == "video") {
if (!Modernizr.video) {
$('<div id="video-unsupported"><p>Sorry, your browser doesn\'t support the HTML5 &lt;video&gt; element!</p><p>Here\'s a <a href="http://caniuse.com/video">list of which browsers do</a>.</p></div>').appendTo('#video-box-inner');
}
else if (Modernizr.video.webm) {
$('<div id="video-unsupported"><p>Sorry, your browser doesn\'t support the WebM video format!</p></div>').appendTo('#video-box-inner');
}
else {
$(window).unbind("resize", scaleVideo); $(window).unbind("resize", scaleVideo);
$(window).unbind("resize", scaleImage); $(window).unbind("resize", scaleImage);
videoSrc = photoFloat.videoPath(currentAlbum, currentPhoto); videoSrc = photoFloat.videoPath(currentAlbum, currentPhoto);
@ -194,6 +202,7 @@ $(document).ready(function() {
.attr("src", videoSrc) .attr("src", videoSrc)
.attr("alt", currentPhoto.name) .attr("alt", currentPhoto.name)
.on('loadstart', scaleVideo); .on('loadstart', scaleVideo);
}
$("head").append("<link rel=\"video_src\" href=\"" + videoSrc + "\" />"); $("head").append("<link rel=\"video_src\" href=\"" + videoSrc + "\" />");
$("#video-box-inner").css('height', height + 'px').css('margin-top', - height / 2); $("#video-box-inner").css('height', height + 'px').css('margin-top', - height / 2);
$("#photo-box").hide(); $("#photo-box").hide();
@ -219,7 +228,7 @@ $(document).ready(function() {
.attr("title", currentPhoto.date) .attr("title", currentPhoto.date)
.load(scaleImage); .load(scaleImage);
$("head").append("<link rel=\"image_src\" href=\"" + photoSrc + "\" />"); $("head").append("<link rel=\"image_src\" href=\"" + photoSrc + "\" />");
$("#video").remove(); $("#video-box-inner").empty();
$("#video-box").hide(); $("#video-box").hide();
$("#photo-box").show(); $("#photo-box").show();
} }