241 lines
10 KiB
HTML
241 lines
10 KiB
HTML
|
<!-- This is the updated HTML file that uses w3.js and w3.css -->
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<title>Image & Video Manager Purge</title>
|
||
|
|
<!-- Add the links to w3.js and w3.css -->
|
||
|
|
<script src="https://www.w3schools.com/lib/w3.js"></script>
|
||
|
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||
|
|
<style>
|
||
|
|
p{
|
||
|
|
font-size:small;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="w3-container" id="root" style="max-width:1400px;margin:auto;">
|
||
|
|
<div class="w3-container w3-teal">
|
||
|
|
<h1>Image & Video Manager Purge Test</h1>
|
||
|
|
</div>
|
||
|
|
<div class="w3-container w3-pale-blue" id="button1">
|
||
|
|
<p id="">Click the button to start. Your images and videos will be shown below.</p>
|
||
|
|
<button class="w3-button w3-blue" onclick="generateImageVideo()">Generate Image and Video</button>
|
||
|
|
<p></p>
|
||
|
|
</div>
|
||
|
|
<div class="w3-container w3-black" id="msg1">
|
||
|
|
<h4>NOTE: Please open 'Developer Tools' and check 'Disable Cache' option under 'Network' tab.</h4>
|
||
|
|
</div>
|
||
|
|
<div id="loading" class="w3-modal w3-animate-zoom w3-animate-opacity">
|
||
|
|
<div class="w3-modal-content w3-card-4">
|
||
|
|
<img class="w3-circle" style="width:100%"
|
||
|
|
src="https://i.pinimg.com/originals/9f/5b/a6/9f5ba6b38c4259a23c5965a8164ec86f.gif" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="w3-container w3-light-grey" id="body">
|
||
|
|
<div class="w3-row-padding w3-margin-top">
|
||
|
|
<div class="w3-third">
|
||
|
|
<div class="w3-card w3-white">
|
||
|
|
<div class="w3-display-container">
|
||
|
|
<img id="originImage" src="http://origin-33.akamai-lab.com/learn/black.jpg"
|
||
|
|
style="width:100%">
|
||
|
|
<div class="w3-display-topright w3-container">
|
||
|
|
<button class="w3-button w3-blue w3-border w3-ripple" onclick="replaceImage()">Click to
|
||
|
|
Replace</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="w3-container">
|
||
|
|
<h5>Origin Image</h5>
|
||
|
|
<p id="originImageURL"></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="w3-third">
|
||
|
|
<div class="w3-card w3-white">
|
||
|
|
<div class="w3-display-container">
|
||
|
|
<img id="cachedImage" src="http://origin-33.akamai-lab.com/learn/black.jpg"
|
||
|
|
style="width:100%">
|
||
|
|
<div class="w3-display-topright w3-container">
|
||
|
|
<button class="w3-button w3-blue w3-border w3-ripple" onclick="reloadImage()">Click to
|
||
|
|
Reload</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="w3-container">
|
||
|
|
<h5>Optimized Image</h5>
|
||
|
|
<p id="cachedImageURL"></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="w3-third">
|
||
|
|
<div class="w3-card w3-white">
|
||
|
|
<div class="w3-display-container">
|
||
|
|
<img id="cachedImage2" src="http://origin-33.akamai-lab.com/learn/black.jpg"
|
||
|
|
style="width:100%">
|
||
|
|
<div class="w3-display-topright w3-container">
|
||
|
|
<button class="w3-button w3-blue w3-border w3-ripple" onclick="reloadImage2()">Click to
|
||
|
|
Reload</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="w3-container">
|
||
|
|
<h5>Optimized Image with custom query string</h5>
|
||
|
|
<p id="cachedImageURL2"></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="w3-row-padding w3-margin-top">
|
||
|
|
<div class="w3-half">
|
||
|
|
<div class="w3-card w3-white w3-display-container">
|
||
|
|
<video style="width:100%;" controls autoplay id="originVideo">
|
||
|
|
<source src="http://origin-33.akamai-lab.com/learn/sample23.mp4" type="video/mp4">
|
||
|
|
Your browser does not support the video tag.
|
||
|
|
</video>
|
||
|
|
<div class="w3-display-topright w3-container">
|
||
|
|
<button class="w3-button w3-blue w3-border w3-ripple" onclick="replaceVideo()">Click to
|
||
|
|
Replace</button>
|
||
|
|
</div>
|
||
|
|
<div class="w3-container">
|
||
|
|
<h5>Origin Video</h5>
|
||
|
|
<p id="originVideoURL"></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="w3-half">
|
||
|
|
<div class="w3-card w3-white w3-display-container">
|
||
|
|
<video style="width:100%;" controls autoplay id="cachedVideo">
|
||
|
|
<source src="http://origin-33.akamai-lab.com/learn/sample23.mp4" type="video/mp4">
|
||
|
|
Your browser does not support the video tag.
|
||
|
|
</video>
|
||
|
|
<div class="w3-display-topright w3-container">
|
||
|
|
<button class="w3-button w3-blue w3-border w3-ripple" onclick="reloadVideo()">Click to
|
||
|
|
Reload</button>
|
||
|
|
</div>
|
||
|
|
<div class="w3-container">
|
||
|
|
<h5>Optimized Video</h5>
|
||
|
|
<p id="cachedVideoURL"></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p> </p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var browserName = navigator.userAgent.toLowerCase();
|
||
|
|
var isChrome = browserName.indexOf("chrome") > -1;
|
||
|
|
if (!isChrome) {
|
||
|
|
alert("Your web browser is not compatible with this page. Please use Chrome or Chrome-compatible browser.");
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
var hostname = location.hostname;
|
||
|
|
var array = hostname.split('.');
|
||
|
|
uid = array[0];
|
||
|
|
console.log(uid);
|
||
|
|
// document.getElementById("body").style.display = "none";
|
||
|
|
|
||
|
|
function generateImageVideo() {
|
||
|
|
// document.getElementById("msg1").style.display = "none";
|
||
|
|
document.getElementById("button1").style.display = "none";
|
||
|
|
generate();
|
||
|
|
}
|
||
|
|
|
||
|
|
function generate() {
|
||
|
|
w3.getHttpObject('/lab/ivm/generate?property=' + uid, setSrc);
|
||
|
|
}
|
||
|
|
|
||
|
|
function setSrc() {
|
||
|
|
|
||
|
|
var originImageSrc = 'http://origin-33.akamai-lab.com/learn/' + uid + '_dog.png';
|
||
|
|
console.log(originImageSrc);
|
||
|
|
document.getElementById("originImage").src = originImageSrc;
|
||
|
|
document.getElementById("originImageURL").innerHTML = originImageSrc;
|
||
|
|
|
||
|
|
var cachedImageSrc = 'http://' + hostname + '/learn/' + uid + '_dog.png';
|
||
|
|
console.log(cachedImageSrc);
|
||
|
|
document.getElementById("cachedImage").src = cachedImageSrc;
|
||
|
|
document.getElementById("cachedImageURL").innerHTML = cachedImageSrc;
|
||
|
|
|
||
|
|
var cachedImageSrc2 = cachedImageSrc+'?uid=1234'
|
||
|
|
// var cachedImageSrc2 = cachedImageSrc+'?im=Grayscale&uid=1234'
|
||
|
|
console.log(cachedImageSrc2);
|
||
|
|
document.getElementById("cachedImage2").src = cachedImageSrc2;
|
||
|
|
document.getElementById("cachedImageURL2").innerHTML = cachedImageSrc2;
|
||
|
|
|
||
|
|
var originVideoSrc = 'http://origin-33.akamai-lab.com/learn/' + uid + '_video.mp4';
|
||
|
|
console.log(originVideoSrc);
|
||
|
|
document.getElementById("originVideo").getElementsByTagName("source")[0].src = originVideoSrc;
|
||
|
|
document.getElementById("originVideo").load();
|
||
|
|
document.getElementById("originVideoURL").innerHTML = originVideoSrc;
|
||
|
|
|
||
|
|
var cachedVideoSrc = 'http://' + hostname + '/learn/' + uid + '_video.mp4';
|
||
|
|
console.log(cachedVideoSrc);
|
||
|
|
document.getElementById("cachedVideo").getElementsByTagName("source")[0].src = cachedVideoSrc;
|
||
|
|
document.getElementById("cachedVideo").load();
|
||
|
|
document.getElementById("cachedVideoURL").innerHTML = cachedVideoSrc;
|
||
|
|
|
||
|
|
document.getElementById("body").style.display = "block";
|
||
|
|
}
|
||
|
|
|
||
|
|
function replaceImage() {
|
||
|
|
w3.getHttpObject('/lab/ivm/replace_image?property=' + uid, showImageOutput);
|
||
|
|
}
|
||
|
|
|
||
|
|
function replaceVideo() {
|
||
|
|
w3.getHttpObject('/lab/ivm/replace_video?property=' + uid, showVideoOutput);
|
||
|
|
}
|
||
|
|
|
||
|
|
function reloadImage() {
|
||
|
|
// Chrome, Brave
|
||
|
|
var image = document.getElementById("cachedImage");
|
||
|
|
var url = image.src;
|
||
|
|
image.src = url+'';
|
||
|
|
console.log('cachedImage reloaded');
|
||
|
|
|
||
|
|
//FireFox, Edge, Safari
|
||
|
|
//location.reload();
|
||
|
|
}
|
||
|
|
|
||
|
|
function reloadImage2() {
|
||
|
|
// Chrome, Brave
|
||
|
|
var image = document.getElementById("cachedImage2");
|
||
|
|
var url = image.src;
|
||
|
|
image.src = url;
|
||
|
|
console.log('cachedImage reloaded');
|
||
|
|
|
||
|
|
//FireFox, Edge, Safari
|
||
|
|
//location.reload();
|
||
|
|
}
|
||
|
|
|
||
|
|
function reloadVideo() {
|
||
|
|
document.getElementById("cachedVideo").load();
|
||
|
|
console.log('cachedVideo reloaded');
|
||
|
|
}
|
||
|
|
|
||
|
|
function showImageOutput(output) {
|
||
|
|
// Chrome, Brave
|
||
|
|
var image = document.getElementById("originImage");
|
||
|
|
var url = image.src;
|
||
|
|
image.src = url;
|
||
|
|
|
||
|
|
// FireFox, Edge, Safari
|
||
|
|
// location.reload();
|
||
|
|
console.log(output);
|
||
|
|
}
|
||
|
|
|
||
|
|
function showVideoOutput(output) {
|
||
|
|
var video = document.getElementById("originVideo");
|
||
|
|
video.load();
|
||
|
|
console.log(output);
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|