Skip to content

Commit

Permalink
Video has completely wrong size when navigating back
Browse files Browse the repository at this point in the history 
 - When using mp4 file in Media->Video page
  • Loading branch information
@torinfo
torinfo committed Oct 26, 2022
1 parent e8a8b7f commit 383bb34
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 45 deletions.
45 changes: 28 additions & 17 deletions ...e/parent_templates/Nottingham/common_html5/js/popcorn/plugins/popcorn.mediaconstructor.js
View file
Expand Up @@ -173,43 +173,54 @@ this.initVideoState = function(mediaData)
// sets the size of videos. width and height take precedence over ratio
this.resizeEmbededMedia = function($video, {ratio = 16 / 9, width, height}) {

if ($video.length == 0)
{
if ($video.length == 0) {
return;
}
var $holder = $video.parent()


var heightClaimed = 0;
$holder.children().not($video).each(function() {
$holder.children().not($video).each(function () {
heightClaimed += $(this).outerHeight(true);
});

var ww = $holder.width(), // max width
wh = Math.floor(ww / ratio); // height from widths perspective
hh = $holder.height() - heightClaimed, // max height
hh = $holder.height() - heightClaimed, // max height
hw = Math.floor(hh * ratio); // width from heights perspective

var w = ww < hw ? ww : hw;
var w = ww < hw ? ww : hw;
var h = ww < hw ? wh : hh;
console.log("width,height,ww,wh,hh,hw,w,h="+(width?width:"UNDEF")+","+(height?height:"UNDEF")+","+ww+","+wh+","+hh+","+hw+","+w+","+h);
console.log("aspect = " + ($video[0].getAttribute("aspect")?$video[0].getAttribute("aspect"):"UNDEF"));
console.log("mainMedia = " + ($video[0].getAttribute("mainMedia")?$video[0].getAttribute("mainMedia"):"UNDEF"));
if(!$video[0].getAttribute("aspect") && !$video.hasClass("mainMedia"))
{
console.log("width,height,ww,wh,hh,hw,w,h=" + (width ? width : "UNDEF") + "," + (height ? height : "UNDEF") + "," + ww + "," + wh + "," + hh + "," + hw + "," + w + "," + h);
console.log("aspect = " + ($video[0].getAttribute("aspect") ? $video[0].getAttribute("aspect") : "UNDEF"));
console.log("mainMedia = " + ($video[0].getAttribute("mainMedia") ? $video[0].getAttribute("mainMedia") : "UNDEF"));
if (!$video[0].getAttribute("aspect") && !$video.hasClass("mainMedia")) {
w = "100%";
h = "100%";
$video.parent().css({
"height": "100%"
});
}
console.log("width,height,ww,wh,hh,hw,w,h="+(width?width:"UNDEF")+","+(height?height:"UNDEF")+","+ww+","+wh+","+hh+","+hw+","+w+","+h);
console.log("width,height,ww,wh,hh,hw,w,h=" + (width ? width : "UNDEF") + "," + (height ? height : "UNDEF") + "," + ww + "," + wh + "," + hh + "," + hw + "," + w + "," + h);
if ($video.hasClass("embed")) {
$video.css({
"width": width ? width : w,
"height": height ? height : h,
"min-width": 150,
"min-height": 120
});
} else if ($video.find(".mejs-container").length > 0) {

$video.css({
"width": width ? width : w,
"height": height ? height : h,
"min-width" : 150,
"min-height": 120
});
var $mediaHolder = $video.find(".mejs-container");
$mediaHolder.css({
"width": width ? width : w,
"height": height ? height : h,
});
$mediaHolder.find(".mejs-overlay-play").css({
"width": width ? width : w,
"height": height ? height : h,
});
}
};

// Adds XAPI tracking to the popcornInstance.
Expand Down
71 changes: 43 additions & 28 deletions modules/xerte/parent_templates/Nottingham/models_html5/textVideo.html
View file
Expand Up @@ -30,43 +30,54 @@
// function called every time the size of the LO is changed
this.sizeChanged = function() {
var $pageVideo = $("#pageVideo"),
iframeRatio = $pageVideo.data('iframeRatio'),
videoDimensions = $pageVideo.data('dimensions');
if (true) {
const ratio = iframeRatio[0] / iframeRatio[1];
// scale the iframe so it stays the right aspect ratio & doesn't exceed the max size (60% of width by default but can be changed with opt property
var iframeMax = x_currentPageXML.getAttribute("iframeMax");
if ($.isNumeric(x_currentPageXML.getAttribute("iframeMax"))) {
iframeMax = Number(x_currentPageXML.getAttribute("iframeMax"));
iframeMax = Math.max(iframeMax, 0.1);
iframeMax = Math.min(iframeMax, 1);
} else {
iframeMax = 0.6;
}

var maxW = x_browserInfo.mobile == true ? 1 : iframeMax,
iframeRatio = $pageVideo.data('iframeRatio'),
videoDimensions = $pageVideo.data('dimensions');
const ratio = iframeRatio[0] / iframeRatio[1];
console.log("Ratio: " + iframeRatio);
console.log("Dimension: " + videoDimensions);

// scale the iframe so it stays the right aspect ratio & doesn't exceed the max size (60% of width by default but can be changed with opt property
var iframeMax = x_currentPageXML.getAttribute("iframeMax");
if ($.isNumeric(iframeMax)) {
iframeMax = Number(iframeMax);
iframeMax = Math.max(iframeMax, 0.1);
iframeMax = Math.min(iframeMax, 1);
} else {
iframeMax = 0.6;
}
console.log("iframeMax: " + iframeMax);

var maxW = x_browserInfo.mobile == true ? 1 : iframeMax,
maxH = $x_pageHolder.height() - ($x_pageDiv.outerHeight() - $x_pageDiv.height()) - ($('.x_floatRight').outerHeight() - $('.x_floatRight').height());

var width = $x_pageDiv.width() * maxW;
var height = (width / ratio) + 35;

if (x_browserInfo.mobile != true && height > maxH) {
height = maxH;
width = ((height - 35) * ratio);
}
$pageVideo

var width = $x_pageDiv.width() * maxW;
var height = (width / ratio) + 35;

if (x_browserInfo.mobile != true && height > maxH) {
height = maxH;
width = ((height - 35) * ratio);
}
console.log("maxW: " + maxW);
console.log("maxH: " + maxH);
console.log("width: " + width);
console.log("height: " + height);
$pageVideo
.width(width)
.height(height);

$(".popcornMedia.embed").each(function(i) {
// Race conditions can cause the video to not be the correct size, so use a timeout to make sure it's the right size
setTimeout(function () {
$(".popcornMedia").each(function (i) {
console.log("PopcornMedia: " + i);
if (videoDimensions) {
console.log("resizeEmbededMedia: wxh=" + videoDimensions[0] + "x" + videoDimensions[1]);
resizeEmbededMedia($(this), {width: videoDimensions[0], height: videoDimensions[1]}) //popcorn mediaconstructor
}
else {
} else {
console.log("resizeEmbededMedia: ratio=" + ratio);
resizeEmbededMedia($(this), {ratio: ratio}) //popcorn mediaconstructor
}
});
}
}, 100);
}

this.init = function()
Expand Down Expand Up @@ -163,6 +174,8 @@
$pageVideo.data('iframeRatio', iframeRatio);
const ratio = iframeRatio[0] / iframeRatio[1];

console.log("#pageVideo: " + $pageVideo.width() + "x" + $pageVideo.height());
console.log("loadMedia: w=" + (videoDimensions ? Number(videoDimensions[0]) : 0) + ", h=" + (videoDimensions ? Number(videoDimensions[1]) : 0) + ", ratio=" + ratio);
this.popcornInstance = loadMedia($("#pageVideo"), "video",
{ tip: x_currentPageXML.getAttribute("tip"),
width: videoDimensions ? Number(videoDimensions[0]) : 0,
Expand Down Expand Up @@ -199,6 +212,8 @@

this.leavePage = function() {
document.dispatchEvent(new Event('leavepage'));
// Destroy popcorn instance
$("#pageVideo").html("");
}
}

Expand Down

0 comments on commit 383bb34

Please sign in to comment.