CODEWITHSUNDEEP
javascripthtml
JustLooking
JustLooking

Reputation: 2486

Non-Microsoft browser - How do I get the error code for a failure?

Here is some simple HTML and Javascript:

<html>
<body>
<video id="video1" width="320" height="240" controls>
  <source src="video1.mp4" type="video/mp444">
  Your browser does not support the video tag.
</video>

<script> 
var myVideo = document.getElementById("video1"); 
var onError = function() {
   if (myVideo.error == null)
   {
       alert('Unknown error'); // crap, only supported in ie
       return;
   }
   if (myVideo.error.code == 1)
   {
       //MEDIA_ERR_ABORTED
       alert(myVideo.error.code + " - fetching prcess aborted by user");
   }
   else if (myVideo.error.code == 2)
   {
       //MEDIA_ERR_NETWORK
       alert(myVideo.error.code + " - error occurred when downloading");
   }
   else if (myVideo.error.code == 3)
   {
       //MEDIA_ERR_DECODE
       alert(myVideo.error.code + " - error occurred when decoding");
   }
   else if (myVideo.error.code == 4)
   {
       //MEDIA_ERR_SRC_NOT_SUPPORTED 
       alert(myVideo.error.code + " - audio/video not supported");
   }
   else
   {
       alert(myVideo.error.code + " - Unknown");
   }
};
myVideo.addEventListener('error', onError, true);
</script> 
</body>
</html>

This code works fine in all broswers that I've tested (IE11, Edge, Chrome, Firefox, the Chrome on my Android Phone).

What does NOT work is the error Property. Only IE and Edge tell me which of the code's it is, where all other browsers just tell me it's an Unknown Error. Which, I guess, makes sense, being that it is only supported in Microsoft products: https://www.w3schools.com/tags/av_prop_error.asp

Is there anything I can do that gets me a little more description or reason as to why there was an error in the first place?

Of note: The type of "video/mp444" was typed on purpose. That's how I am simulating one type of error.

Upvotes: 1

Views: 136

Answers (2)

JustLooking
JustLooking

Reputation: 2486

Changing my original video tags from:

<html>
<body>
<video id="video1" width="320" height="240" controls>
  <source src="video1.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
</body>
</html>

to:

<html>
<body>  
<video id="video1" width="320" height="240" controls src="video1.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
</body>
</html>

seemed to work for me. I no longer can make an error by making the type video/mp444. Instead, I just point it to a video that doesn't exist - and that gets me error code 4. But it works in all browsers now. myVideo.error.code has a value and myVideo.error is no longer null.

I'm going to give the green check-mark to Scott Marcus for his awesomeness.

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65806

The final argument to .addEventListener() indicates whether the event should be handled during the "capture" phase of the event raising process. Depending on where the event is raised and where you want to handle the event, capturing/bubbling come into play. 99.999% of the time, we want false there (IE 8 and less don't even support capturing anyway), but in this case, the event does not bubble (log the event and you will see the bubbles property is false).

Now, in your code, you are using the source child element, and any errors will be triggered at that element. If you want to handle the event at a higher level (the video ancestor element), event capturing must be used, so your code that sets the event listener on the video element that uses the true value for the 3rd argument to .addEventListener() would be correct.

myVideo.addEventListener('error', onError, true);

However, given that you only have one source, you can eliminate this element and just set the src on the video element itself. This allows you to set the event handler directly on the object that will throw the event, and in that case, the 3rd argument should be false or omitted:

myVideo.addEventListener('error', onError, false);

or:

myVideo.addEventListener('error', onError);

As for your error handling function itself, under the DOM standard, the event handling function will be passed a single argument that references the event itself, so all your event handlers should be prepared to receive that argument. However, that built-in event won't have the code property you are looking for. Use mediaElement.error.code instead.

Also, you may want to refactor it into a switch statement, which is better suited for a single property/variable being checked for many possible values. 

var myVideo = document.querySelector("#video1");
myVideo.addEventListener('error', onError);

    function onError(evt) {
       var message = "";
       // The normal error event will not contain the error code
       switch (myVideo.error.code) {
         case null:
           message = 'Unknown error'; // crap, only supported in ie
           break;
         case 1:
           //MEDIA_ERR_ABORTED
           message = " - fetching process aborted by user";
           break;
         case 2:
           //MEDIA_ERR_NETWORK
           message = " - error occurred when downloading";
           break;
         case 3:
           //MEDIA_ERR_DECODE
           message = " - error occurred when decoding";
           break;
         case 4:
           //MEDIA_ERR_SRC_NOT_SUPPORTED 
           message = " - audio/video not supported";
           break;
         default:
           message = " - Unknown";
           break;
       }

       console.log(myVideo.error.code + message);
    };
<video id="video1" width="320" height="240" controls src="video1.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Upvotes: 2

Related Questions