Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

error code 2 and error code 4 #8797

Open
abhijithhn-ibil opened this issue Jul 12, 2024 · 3 comments
Open

error code 2 and error code 4 #8797

abhijithhn-ibil opened this issue Jul 12, 2024 · 3 comments
Labels
needs: triage This issue needs to be reviewed

Comments

@abhijithhn-ibil
Copy link

abhijithhn-ibil commented Jul 12, 2024

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

@abhijithhn-ibil abhijithhn-ibil added the needs: triage This issue needs to be reviewed label Jul 12, 2024
Copy link

welcome bot commented Jul 12, 2024

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

@abhijithhn-ibil abhijithhn-ibil changed the title error code 2 and error code 3 error code 2 and error code 4 Jul 12, 2024
@mister-ben
Copy link
Contributor

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs: triage This issue needs to be reviewed
Projects
None yet
Development

No branches or pull requests

2 participants