71 lines
2.5 KiB
JavaScript
71 lines
2.5 KiB
JavaScript
/**
|
|
* Enhanced video.js initialization script
|
|
*
|
|
* This script handles video initialization across different browsers,
|
|
* properly supporting HLS playback with appropriate fallbacks.
|
|
*/
|
|
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 all source elements
|
|
const sourceElements = videoElement.querySelectorAll('source');
|
|
let hasHlsSource = false;
|
|
let hasOtherSource = false;
|
|
|
|
// Check for HLS sources
|
|
sourceElements.forEach(function(source) {
|
|
const type = source.getAttribute('type');
|
|
if (type === 'application/x-mpegurl' || type === 'application/vnd.apple.mpegurl') {
|
|
hasHlsSource = true;
|
|
} else {
|
|
hasOtherSource = true;
|
|
}
|
|
});
|
|
|
|
// Initialize with appropriate settings
|
|
const player = videojs(videoElement.id, {
|
|
fluid: true,
|
|
responsive: true,
|
|
html5: {
|
|
vhs: {
|
|
overrideNative: !videojs.browser.IS_SAFARI,
|
|
enableLowInitialPlaylist: true,
|
|
limitRenditionsByPlayerDimensions: true
|
|
},
|
|
nativeAudioTracks: videojs.browser.IS_SAFARI,
|
|
nativeVideoTracks: videojs.browser.IS_SAFARI
|
|
},
|
|
playbackRates: [0.75, 1, 1.25, 1.5, 2]
|
|
});
|
|
|
|
// Add HLS.js for non-Safari browsers
|
|
if (hasHlsSource && !videojs.browser.IS_SAFARI) {
|
|
console.log('Adding HLS support for ' + videoElement.id);
|
|
player.src({
|
|
src: sourceElements[0].src,
|
|
type: 'application/x-mpegurl'
|
|
});
|
|
}
|
|
|
|
// Improve compatibility with varying window sizes
|
|
player.on('play', function() {
|
|
player.fluid(true);
|
|
});
|
|
|
|
} catch (e) {
|
|
console.error('Error initializing video ' + videoElement.id + ':', e);
|
|
}
|
|
} else {
|
|
console.log('Video ' + videoElement.id + ' already initialized');
|
|
}
|
|
});
|
|
}
|
|
});
|