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-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 {
color: rgb(0, 0, 0);
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

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

@ -147,7 +147,8 @@ $(document).ready(function() {
$("#album-view").removeClass("photo-view-container");
$("#subalbums").show();
$("#photo-view").hide();
$("#video").remove();
$("#video-box-inner").empty();
$("#video-box").hide();
}
setTimeout(scrollToThumb, 1);
}
@ -182,18 +183,26 @@ $(document).ready(function() {
}
function showPhoto() {
var width, height, photoSrc, videoSrc, previousPhoto, nextPhoto, nextLink, text;
width = currentPhoto.size[0];
height = currentPhoto.size[1];
if (currentPhoto.mediaType == "video") {
width = currentPhoto.size[0];
height = currentPhoto.size[1];
$(window).unbind("resize", scaleVideo);
$(window).unbind("resize", scaleImage);
videoSrc = photoFloat.videoPath(currentAlbum, currentPhoto);
$('<video/>', { id: 'video', controls: true }).appendTo('#video-box-inner')
.attr("width", width).attr("height", height).attr("ratio", currentPhoto.size[0] / currentPhoto.size[1])
.attr("src", videoSrc)
.attr("alt", currentPhoto.name)
.on('loadstart', scaleVideo);
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", scaleImage);
videoSrc = photoFloat.videoPath(currentAlbum, currentPhoto);
$('<video/>', { id: 'video', controls: true }).appendTo('#video-box-inner')
.attr("width", width).attr("height", height).attr("ratio", currentPhoto.size[0] / currentPhoto.size[1])
.attr("src", videoSrc)
.attr("alt", currentPhoto.name)
.on('loadstart', scaleVideo);
}
$("head").append("<link rel=\"video_src\" href=\"" + videoSrc + "\" />");
$("#video-box-inner").css('height', height + 'px').css('margin-top', - height / 2);
$("#photo-box").hide();
@ -219,7 +228,7 @@ $(document).ready(function() {
.attr("title", currentPhoto.date)
.load(scaleImage);
$("head").append("<link rel=\"image_src\" href=\"" + photoSrc + "\" />");
$("#video").remove();
$("#video-box-inner").empty();
$("#video-box").hide();
$("#photo-box").show();
}