You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I attempted to play a video stored in an S3 bucket, which is approximately 3GB in size (mp4). Initially, the video plays fine, but when I seek forward or backward, the player unexpectedly goes into buffering, eventually throwing an error in the console:
_ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.
VIDEOJS: ERROR: (CODE:2 MEDIA_ERR_NETWORK) A network error caused the media download to fail part-way_
Additional Note: Sometimes, this causes my mobile tab to hang, leading to an "Aw, Snap!" error in the browser.
I tried three different code implementations to handle the error and restore the player, but none were successful. The following scenarios consistently reproduce the error: continuous seeking back and forth by dragging the timeline, reloading the video page multiple times, and switching to other apps while the video is playing.
### #Version 1
player.on('error', function() {
if (player.error().code === 2 || player.error().code === 4) { // Network error or unsupported format
if (retryCount >= maxRetries) {
console.log('Max retries reached. Displaying error message to user.');
player.errorDisplay.open();
player.errorDisplay.el().innerHTML = 'Network error: Failed to download the video. Please check your connection and try again.';
return;
}
console.log('Retry attempt:', retryCount + 1);
retryCount++;
var time = player.currentTime(); // Save the current time
// Retry loading and playing the video every 5 seconds
timer = setInterval(function() {
player.load();
player.one('loadeddata', function() {
player.currentTime(time);
player.play().catch(function(error) {
console.error('Play interrupted:', error);
});
});
}, retryInterval);
}
});
player.on('playing', function() {
// Clear the interval once the video starts playing
if (timer) {
clearInterval(timer);
timer = null;
}
});
### # Version 2
player.on('error', function() {
console.log("@#@#@##@@")
var error = player.error();
if (error.code === 2||error.code==4) { // MEDIA_ERR_NETWORK
console.log('A network error caused media download to fail part way.');
const currentTime = player.currentTime(); // Capture the current time
console.log(`Video failed at ${currentTime} seconds`);
// Display a custom error message to the user
player.errorDisplay.open();
player.errorDisplay.el().innerHTML = 'Network error:testtttttttttttttt Failed to download the video. Please check your connection and try again.';
// Optionally, attempt to reload the video
player.one('loadedmetadata', () => {
player.currentTime(currentTime); // Seek to the captured time
player.play();
});
player.src({ type: 'video/mp4', src: this.props?.src });
player.load();
}
});
#Version 3
let errorHandlingInProgress = false;
let retryCount = 0;
const maxRetries = 3; // Maximum number of retries
const retryDelay = 5000; // Delay between retries in milliseconds (5 seconds)
player.on('error', function() {
console.log('Error event triggered');
if (errorHandlingInProgress) {
console.log('Error handling already in progress, returning...');
return;
}
errorHandlingInProgress = true;
try {
const error = player.error();
console.log('Error code:', error.code);
if (error.code === 2 || error.code === 4) { // MEDIA_ERR_NETWORK or MEDIA_ERR_SRC_NOT_SUPPORTED
if (retryCount >= maxRetries) {
console.log('Max retries reached. Displaying error message to user.');
player.errorDisplay.open();
player.errorDisplay.el().innerHTML = 'Network error: Failed to download the video. Please check your connection and try again.';
errorHandlingInProgress = false;
return;
}
console.log('A network error caused the media download to fail part-way.');
const currentTime = player.currentTime(); // Capture the current time
console.log(`Video failed at ${currentTime} seconds`);
// Pause the player to prevent flickering
player.pause();
// Display a custom error message to the user
player.errorDisplay.open();
player.errorDisplay.el().innerHTML = `Network error: Failed to download the video. Retrying... (${retryCount + 1}/${maxRetries})`;
// Verify if the current source is valid
const currentSource = player.currentSource();
if (currentSource && currentSource.src) {
console.log("Reloading the video from source:", currentSource.src);
// Retry loading the video after a delay
setTimeout(() => {
try {
player.src({ type: 'video/mp4', src: currentSource.src });
player.load();
player.one('loadedmetadata', () => {
console.log("Metadata loaded, seeking to time:", currentTime);
player.currentTime(currentTime); // Seek to the captured time
player.play();
retryCount++; // Increment the retry count
errorHandlingInProgress = false;
console.log("Playback resumed successfully");
});
} catch (e) {
console.error("Error during video reload:", e);
errorHandlingInProgress = false;
}
}, retryDelay);
} else {
console.log('Invalid video source.');
errorHandlingInProgress = false;
}
} else {
console.log("Error code not handled:", error.code);
errorHandlingInProgress = false;
}
} catch (err) {
console.error("An error occurred while handling the media error:", err);
errorHandlingInProgress = false;
}
});
I was using videojs for the past years and all of a sudden this came and it's a critical ....Kindly please check...
Reduced test case
`
Steps to reproduce
Play a video from S3 that is larger than 3GB.
Seek through the video by dragging the progress bar.
Continuously refresh the page.
After playing the video, switch to other apps on your mobile device, then return to the browser or PWA and seek the video.
Errors
ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.
VIDEOJS: ERROR: (CODE:2 MEDIA_ERR_NETWORK) A network error caused the media download to fail part-way
What version of Video.js are you using?
"video.js": "^7.15.4",
Video.js plugins used.
No response
What browser(s) including version(s) does this occur with?
Chrome,Brave,Edge
What OS(es) and version(s) does this occur with?
Android
The text was updated successfully, but these errors were encountered:
If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.
MP4 is always native playback - Video.js sets the source on the video element and playback is entirely handled by the browser. Video.js is just relaying these error codes as they trigger on the video element and doesn't get access to more information than that. 3GB is an excessive size for a streaming video, and it's not at all inconceivable that some browers/devices would struggle. HLS would almost certainly be a better fit.
So there is no other way to reinitialize or reload the video if an error came ?
Sometime the tab is getting crashed and showing
AW , Snap error and hangs my browser..
Description
Issue Encountered in Mobile Browsers and PWAs
I attempted to play a video stored in an S3 bucket, which is approximately 3GB in size (mp4). Initially, the video plays fine, but when I seek forward or backward, the player unexpectedly goes into buffering, eventually throwing an error in the console:
_ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.
VIDEOJS: ERROR: (CODE:2 MEDIA_ERR_NETWORK) A network error caused the media download to fail part-way_
Additional Note: Sometimes, this causes my mobile tab to hang, leading to an "Aw, Snap!" error in the browser.
I tried three different code implementations to handle the error and restore the player, but none were successful. The following scenarios consistently reproduce the error: continuous seeking back and forth by dragging the timeline, reloading the video page multiple times, and switching to other apps while the video is playing.
### #Version 1
### # Version 2
#Version 3
let errorHandlingInProgress = false;
let retryCount = 0;
const maxRetries = 3; // Maximum number of retries
const retryDelay = 5000; // Delay between retries in milliseconds (5 seconds)
Reduced test case
`
Steps to reproduce
Errors
ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.
VIDEOJS: ERROR: (CODE:2 MEDIA_ERR_NETWORK) A network error caused the media download to fail part-way
What version of Video.js are you using?
"video.js": "^7.15.4",
Video.js plugins used.
No response
What browser(s) including version(s) does this occur with?
Chrome,Brave,Edge
What OS(es) and version(s) does this occur with?
Android
The text was updated successfully, but these errors were encountered: