77 lines
2.8 KiB
JavaScript
77 lines
2.8 KiB
JavaScript
/**
|
|
* Enhanced video.js initialization script
|
|
*
|
|
* This script handles video initialization across different browsers,
|
|
* properly supporting HLS playback regardless of MIME types.
|
|
*/
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize video.js on all video elements with the video-js class
|
|
const videoElements = document.querySelectorAll('video.video-js');
|
|
|
|
if (videoElements && videoElements.length > 0) {
|
|
console.log('Found ' + videoElements.length + ' video elements to initialize');
|
|
|
|
videoElements.forEach(function(videoElement) {
|
|
// Only initialize if not already initialized
|
|
if (!videoElement.classList.contains('vjs-has-started')) {
|
|
try {
|
|
// Get sources and detect HLS by filename pattern regardless of MIME type
|
|
const sourceElements = videoElement.querySelectorAll('source');
|
|
let hlsSource = null;
|
|
|
|
sourceElements.forEach(function(source) {
|
|
const src = source.getAttribute('src');
|
|
// Detect HLS by the .m3u8 extension in URL even if the MIME type is different
|
|
if (src && src.includes('.m3u8')) {
|
|
hlsSource = src;
|
|
}
|
|
});
|
|
|
|
// Initialize with appropriate settings
|
|
const player = videojs(videoElement.id, {
|
|
fluid: true,
|
|
responsive: true,
|
|
html5: {
|
|
vhs: {
|
|
overrideNative: !videojs.browser.IS_SAFARI,
|
|
enableLowInitialPlaylist: true,
|
|
limitRenditionsByPlayerDimensions: true,
|
|
useBandwidthFromLocalStorage: true
|
|
},
|
|
nativeAudioTracks: videojs.browser.IS_SAFARI,
|
|
nativeVideoTracks: videojs.browser.IS_SAFARI
|
|
},
|
|
playbackRates: [0.75, 1, 1.25, 1.5, 2]
|
|
});
|
|
|
|
// Force HLS source if detected regardless of MIME type
|
|
if (hlsSource) {
|
|
console.log('HLS source detected for ' + videoElement.id + ': ' + hlsSource);
|
|
player.src({
|
|
src: hlsSource,
|
|
type: 'application/x-mpegURL'
|
|
});
|
|
}
|
|
|
|
// Handle errors
|
|
player.on('error', function() {
|
|
console.error('Video player error:', player.error());
|
|
// Try to recover by forcing MP4 fallback if available
|
|
sourceElements.forEach(function(source) {
|
|
if (!source.src.includes('.m3u8')) {
|
|
player.src(source.src);
|
|
player.play();
|
|
return;
|
|
}
|
|
});
|
|
});
|
|
|
|
} catch (e) {
|
|
console.error('Error initializing video ' + videoElement.id + ':', e);
|
|
}
|
|
} else {
|
|
console.log('Video ' + videoElement.id + ' already initialized');
|
|
}
|
|
});
|
|
}
|
|
});
|