CODEWITHSUNDEEP
javascripthtmlerror-handlinghtml5-video
shrewdbeans
shrewdbeans

Reputation: 12549

How to fake a HTML5 video element to error to test error handling

I'm currently developing an HTML5 video player and hooked up the error event listener, however so far there has been no errors.

Is there a way to fake/simulate an error, to test that it's working correctly?

Perhaps a method I can call to force it to error?

Upvotes: 6

Views: 2790

Answers (2)

user1693593
user1693593

Reputation:

There are no method to simulate errors from within the browser. You'll have to setup the environment itself to simulate errors (both for error as well as the abort event):

  • Create two faulty files: one which has container error (truncate the file size) and one with encoding error (hex edit the file and override some of the data)
  • Additionally use an URL to a non-existing file
  • Setup a server script which can terminate the serving of the file or take the test-site down
  • Setup a script that can disable the net interface

Then run specific tests for each scenario to see how your code behaves.

A custom event can be dispatched but the problem is that it won't prevent the browser from loading the file which means you still can get a load event etc. which would be conflicting.

You can generate an abort event by changing the video source while the video is playing - which is possibly (if you allow swapping sources for the same media element) something you would need to handle as it's not technically an error in that case.

Upvotes: 6

Andrew Myers
Andrew Myers

Reputation: 2786

I'm not aware of any built-in method to simulate an error. I suppose you could create an error event and dispatch it to one of your <source> elements.

function simulateError() {
  // I'm not sure if it would be better to use ErrorEvent()
  // Using Chrome devtools, this gives an error event that appears
  // almost identical to having a source that gets a 404
  var event = new Event('error', {
    'view': window,
    'cancelable': true
  });
  var src = document.getElementById('sourceElement'); 
  src .dispatchEvent(event);
}

Another way would be to follow @andlrc's advice: give it a broken video or cut the internet. I get an error when the source is invalid, so you could try that too.

Upvotes: 1

Related Questions