error code 2 and error code 4

[abhijithhn-ibil]

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

 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

1. Play a video from S3 that is larger than 3GB.
2. Seek through the video by dragging the progress bar.
3. Continuously refresh the page.
4. 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

[welcome]

👋 Thanks for opening your first issue here! 👋

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.

[mister-ben]

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.

[abhijithhn-ibil]

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..