93 lines
3.5 KiB
JavaScript
93 lines
3.5 KiB
JavaScript
/**
|
|
* Chrome-specific video fallback
|
|
* Since Chrome has issues with VideoJS/HLS, this script provides a fallback
|
|
* that replaces video players with play buttons that open videos in a new page.
|
|
*/
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Only run this script for Chrome browsers
|
|
const isChrome = /Chrome/.test(navigator.userAgent) && !/Edge/.test(navigator.userAgent) && !/OPR/.test(navigator.userAgent);
|
|
|
|
if (!isChrome) {
|
|
return; // Exit if not Chrome
|
|
}
|
|
|
|
// Videos to handle with IDs and their mp4 sources
|
|
const videoMappings = {
|
|
'video-hero': '/static/videos/video1.mp4',
|
|
'video2': '/static/videos/video2.mp4',
|
|
'video3': '/static/videos/video3.mp4'
|
|
};
|
|
|
|
// Process each video
|
|
Object.keys(videoMappings).forEach(function(videoId) {
|
|
const videoElement = document.getElementById(videoId);
|
|
if (!videoElement) return;
|
|
|
|
const videoContainer = videoElement.closest('.video-container');
|
|
if (!videoContainer) return;
|
|
|
|
// Get poster image
|
|
const posterUrl = videoElement.getAttribute('poster');
|
|
|
|
// Create play button overlay
|
|
const playButtonOverlay = document.createElement('div');
|
|
playButtonOverlay.className = 'chrome-play-overlay';
|
|
playButtonOverlay.innerHTML = `
|
|
<div class="chrome-play-button">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="68" height="48" viewBox="0 0 68 48">
|
|
<path fill="#f00" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path>
|
|
<path fill="#fff" d="M 45,24 27,14 27,34"></path>
|
|
</svg>
|
|
</div>
|
|
`;
|
|
|
|
// Style the container for positioning
|
|
videoContainer.style.position = 'relative';
|
|
|
|
// Create a poster image as background
|
|
if (posterUrl) {
|
|
const posterImage = document.createElement('div');
|
|
posterImage.className = 'chrome-poster-image';
|
|
posterImage.style.backgroundImage = `url(${posterUrl})`;
|
|
videoContainer.appendChild(posterImage);
|
|
}
|
|
|
|
// Add click event to open the video in a new page/overlay
|
|
playButtonOverlay.addEventListener('click', function() {
|
|
// Create the lightbox overlay
|
|
const lightbox = document.createElement('div');
|
|
lightbox.className = 'video-lightbox';
|
|
lightbox.innerHTML = `
|
|
<div class="video-lightbox-content">
|
|
<button class="close-lightbox">×</button>
|
|
<video controls autoplay>
|
|
<source src="${videoMappings[videoId]}" type="video/mp4">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</div>
|
|
`;
|
|
|
|
// Add the lightbox to the body
|
|
document.body.appendChild(lightbox);
|
|
|
|
// Add close functionality
|
|
const closeButton = lightbox.querySelector('.close-lightbox');
|
|
closeButton.addEventListener('click', function() {
|
|
document.body.removeChild(lightbox);
|
|
});
|
|
|
|
// Close when clicking outside the video
|
|
lightbox.addEventListener('click', function(e) {
|
|
if (e.target === lightbox) {
|
|
document.body.removeChild(lightbox);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Hide the original video element
|
|
videoElement.style.display = 'none';
|
|
|
|
// Add the play button to the container
|
|
videoContainer.appendChild(playButtonOverlay);
|
|
});
|
|
});
|