66 lines
2.6 KiB
JavaScript
66 lines
2.6 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 redirect to dedicated video pages.
|
|
*/
|
|
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 corresponding dedicated pages
|
|
const videoMappings = {
|
|
'video-hero': '/videos/video1.html',
|
|
'video2': '/videos/video2.html',
|
|
'video3': '/videos/video3.html'
|
|
};
|
|
|
|
// 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 dedicated video page
|
|
playButtonOverlay.addEventListener('click', function() {
|
|
window.location.href = videoMappings[videoId];
|
|
});
|
|
|
|
// Hide the original video element
|
|
videoElement.style.display = 'none';
|
|
|
|
// Add the play button to the container
|
|
videoContainer.appendChild(playButtonOverlay);
|
|
});
|
|
});
|