57 lines
1.8 KiB
HTML
57 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Media Slideshow</title>
|
|
<style>
|
|
body { margin: 0; background: black; }
|
|
img, video { width: 100vw; height: 100vh; object-fit: contain; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<img id="slideshow" style="display:none;" alt="Loading...">
|
|
<video id="videoPlayer" autoplay loop muted style="display:none;"></video>
|
|
|
|
<script>
|
|
const img = document.getElementById('slideshow');
|
|
const video = document.getElementById('videoPlayer');
|
|
const apiUrl = 'http://localhost:8111/wp-json/cwadvert/v1/get-ad'; // << update this
|
|
const interval = 30000;
|
|
|
|
async function updateMedia() {
|
|
try {
|
|
const response = await fetch(apiUrl);
|
|
const data = await response.json();
|
|
const url = data.image;
|
|
|
|
if (!url){
|
|
console.error("media url is blank");
|
|
return;
|
|
}
|
|
|
|
console.trace("Setting media url");
|
|
|
|
if (url.endsWith('.mp4') || url.endsWith('.webm')) {
|
|
img.style.display = 'none';
|
|
video.style.display = 'block';
|
|
if (video.src !== url) {
|
|
video.src = url;
|
|
video.load();
|
|
video.play();
|
|
}
|
|
} else {
|
|
video.style.display = 'none';
|
|
img.style.display = 'block';
|
|
img.src = url;
|
|
}
|
|
} catch (e) {
|
|
console.error('Error fetching media:', e);
|
|
}
|
|
}
|
|
|
|
updateMedia();
|
|
setInterval(updateMedia, interval);
|
|
</script>
|
|
</body>
|
|
</html>
|