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

Fix issue with duplicate video frames.

Browse Source 
Whenever you had more than one video in a row, it would not
clear the old video before showing the next, resulting in multiple
video frames being shown, only getting cleared whenever a photo
appeared. Big irritation, small fix (-:
This commit is contained in:
Joachim Tingvold 2015-10-20 03:20:47 +02:00
parent 05475b6ed0
commit e4244d086d
1 changed files with 19 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -183,32 +183,31 @@ $(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;
width = currentPhoto.size[0]; width = currentPhoto.size[0];
height = currentPhoto.size[1]; height = currentPhoto.size[1];
if (currentPhoto.mediaType == "video") { if (currentPhoto.mediaType == "video") {
if (!Modernizr.video) { $("#video-box-inner").empty();
$('<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'); 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.h264) { }
$('<div id="video-unsupported"><p>Sorry, your browser doesn\'t support the H.264 video format!</p></div>').appendTo('#video-box-inner'); else if (!Modernizr.video.h264) {
} $('<div id="video-unsupported"><p>Sorry, your browser doesn\'t support the H.264 video format!</p></div>').appendTo('#video-box-inner');
else { } 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);
$('<video/>', { id: 'video', controls: true }).appendTo('#video-box-inner') $('<video/>', { id: 'video', controls: true }).appendTo('#video-box-inner')
.attr("width", width).attr("height", height).attr("ratio", currentPhoto.size[0] / currentPhoto.size[1]) .attr("width", width).attr("height", height).attr("ratio", currentPhoto.size[0] / currentPhoto.size[1])
.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();
$("#video-box").show(); $("#video-box").show();
} } else {
else {
width = currentPhoto.size[0]; width = currentPhoto.size[0];
height = currentPhoto.size[1]; height = currentPhoto.size[1];
if (width > height) { if (width > height) {