Freecorn1854/freecorn-landing-page
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial upload

Browse source
This commit is contained in:
Jimbo 2024-08-20 13:37:03 -04:00
parent bdcd0aebaf
commit 175bed8a21
21 changed files with 506 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

70
streams/airbenz/index.html Normal file
View file

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Airbenz TV</title>
<link rel="stylesheet" href="../43styles.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}}}'
>
<source src="/streams/hls/AirbenzTV.m3u8" type="application/x-mpegURL" />
<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;">
<img src="/images/copyright/airbenz-offline.png" alt="Fallback Image" id="fallback-image">
</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>