2024-08-20 13:37:03 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Bloxeleste Gaming</title>
|
|
|
|
|
<link rel="stylesheet" href="../styles.css">
|
|
|
|
|
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="video-container" id="video-container">
|
|
|
|
|
<video
|
|
|
|
|
id="my-video"
|
|
|
|
|
class="video-js vjs-fluid"
|
|
|
|
|
controls
|
|
|
|
|
preload="auto"
|
|
|
|
|
width="1280"
|
|
|
|
|
height="720"
|
|
|
|
|
autoplay
|
|
|
|
|
poster="MY_VIDEO_POSTER.jpg"
|
|
|
|
|
data-setup='{"techOrder": ["html5", "flash"], "html5": {"hls": {"enableLowInitialPlaylist": true, "smoothQualityChange": true}}}'
|
|
|
|
|
>
|
2024-08-20 13:51:56 -04:00
|
|
|
<source src="/streams/hls/jimbo.m3u8" type="application/x-mpegURL" />
|
2024-08-20 13:37:03 -04:00
|
|
|
<p class="vjs-no-js">
|
|
|
|
|
To view this video please enable JavaScript, and consider upgrading to a
|
|
|
|
|
web browser that
|
|
|
|
|
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
|
|
|
|
|
</p>
|
|
|
|
|
</video>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="image-container" id="image-container" style="display:none;">
|
2024-08-20 13:51:56 -04:00
|
|
|
<img src="/images/offline/jimbo-offline.png" alt="Fallback Image" id="fallback-image">
|
2024-08-20 13:37:03 -04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
var videoElement = document.getElementById('my-video');
|
|
|
|
|
var videoContainer = document.getElementById('video-container');
|
|
|
|
|
var imageContainer = document.getElementById('image-container');
|
|
|
|
|
var fallbackImage = document.getElementById('fallback-image');
|
|
|
|
|
|
|
|
|
|
function handleVideoError() {
|
|
|
|
|
videoContainer.style.display = 'none';
|
|
|
|
|
imageContainer.style.display = 'flex';
|
|
|
|
|
|
|
|
|
|
// Adjust image container to match the aspect ratio of the fallback image
|
|
|
|
|
fallbackImage.onload = function() {
|
|
|
|
|
var aspectRatio = fallbackImage.naturalWidth / fallbackImage.naturalHeight;
|
|
|
|
|
if (window.innerWidth / window.innerHeight > aspectRatio) {
|
|
|
|
|
fallbackImage.style.width = 'auto';
|
|
|
|
|
fallbackImage.style.height = '100%';
|
|
|
|
|
} else {
|
|
|
|
|
fallbackImage.style.width = '100%';
|
|
|
|
|
fallbackImage.style.height = 'auto';
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleVideoPlaying() {
|
|
|
|
|
videoContainer.style.display = 'block';
|
|
|
|
|
imageContainer.style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
videoElement.addEventListener('error', handleVideoError);
|
|
|
|
|
videoElement.addEventListener('canplay', handleVideoPlaying);
|
|
|
|
|
videoElement.addEventListener('playing', handleVideoPlaying);
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
