diff --git a/static/js/script.js b/static/js/script.js index 0b49b6f..7c39b52 100644 --- a/static/js/script.js +++ b/static/js/script.js @@ -29,31 +29,23 @@ var apply_url_change = function(url) { show_for_ok(); - flvPlayer = mpegts.createPlayer({type: 'flv', url: url, isLive: true, enableStashBuffer: false}); - flvPlayer.attachMediaElement(videoElement); - flvPlayer.load(); + enterFullScreen(videoElement).then(() => { + flvPlayer = mpegts.createPlayer({type: 'flv', url: url, isLive: true, enableStashBuffer: false}); + flvPlayer.attachMediaElement(videoElement); + flvPlayer.load(); - videoElement.muted = true; - - videoElement.onloadedmetadata = function() { - videoElement.style.width = `${videoElement.videoWidth}px`; - videoElement.style.height = `${videoElement.videoHeight}px`; - - enterFullScreen(videoElement).then(() => { - flvPlayer.play().then(() => { - console.log('Autoplay started'); - }).catch(error => { - console.error('Autoplay was prevented:', error); - }); + videoElement.muted = true; + + flvPlayer.play().then(() => { + console.log('Autoplay started'); }).catch(error => { - console.error('Fullscreen was prevented:', error); - flvPlayer.play().then(() => { - console.log('Autoplay started'); - }).catch(error => { - console.error('Autoplay was prevented:', error); - }); + console.error('Autoplay was prevented initially:', error); + retryPlay(); }); - }; + }).catch(error => { + console.error('Fullscreen was prevented:', error); + hide_for_error(); + }); }; var closeOverlay = function() { @@ -90,6 +82,21 @@ var exitFullScreen = function() { } }; +var retryPlay = function(attempts = 3) { + if (attempts > 0) { + setTimeout(() => { + flvPlayer.play().then(() => { + console.log('Autoplay started after retry'); + }).catch(error => { + console.error(`Autoplay retry failed (${3 - attempts + 1}):`, error); + retryPlay(attempts - 1); + }); + }, 1000); + } else { + console.error('Autoplay failed after multiple attempts'); + } +}; + videoElement.addEventListener('webkitfullscreenchange', onFullScreenChange); videoElement.addEventListener('mozfullscreenchange', onFullScreenChange); videoElement.addEventListener('fullscreenchange', onFullScreenChange);