Create 3 different sized videos from one, it runs in a directory of VP9 WebM videos, so...it pretty specific..
also here is the middleware code that detects screen size from a cookie and changes the video you see:
app.use((req, res, next) => {
let url = req.url;
let urlS = url.split("/");
let file = urlS[urlS.length-1];
console.log("URL: ", file);
if (file.includes('.webm') && !url.includes('videos/desktop') && !url.includes('videos/mobile')) {
console.log('found');
const cookie = req.headers.cookie;
console.log("WEBM COokie: ", cookie);
let cookieInfo = null;
if (cookie) {
console.log("COOKIE FOUND: ", cookie);
cookieInfo = cookie.split('=');
if (cookieInfo && cookieInfo[0] === 'screen_width') {
let screensize = cookieInfo[1].split(";")[0];
if (!req._isModified) {
req._isModified = true;
console.log("SCREEN SIZE: ", screensize);
const newUrlEndingByScreenSizeMap = { '400': "_250", '800': "_500", '1200': "_750" };
const newUrlEndingForScreenSizeKey = newUrlEndingByScreenSizeMap[Object.keys(newUrlEndingByScreenSizeMap).find((key) => {
console.log("Key: ", key, " | screen size: ", screensize);
return Number(key) >= screensize;
})]
console.log("newUrlEndingForScreenSizeKey: ", newUrlEndingForScreenSizeKey);
const newFileNameWithProperResolution = file.slice(0, -5) + `${newUrlEndingForScreenSizeKey}.webm`;
if(screensize > 800) {
res.redirect(302, url.replace('/s/pa/ces/over/tabs/vidyas/', 'videos/desktop/').replace(file, newFileNameWithProperResolution));
} else {
res.redirect(302, url.replace('/s/pa/ces/over/tabs/vidyas/', 'videos/mobile/').replace(file, newFileNameWithProperResolution));
}
} else { next(); }
} else { next(); } /* req._isModified not set -- will be set by now, if applicable */
} else { next(); } /* req._isModified not set -- will be set by now, if applicable */
} else {next();} /* Not a webm file so there's nothing to do! */
});