Treat 404 on video Html5

Question

How can I handle errors like 404 in the Html5 video tag? I took a look at all the available events and the only one who was supposed to serve in this case was the onerror, however, when I define it by means of an attribute in the tag it can never find my function and in the example of the link there, when the 404, it does not call the function.

Does anyone know how to get around 404 errors?

Here is an example from jsfiddle. To test the first function is only by "onerror=test()" in the video tag

Answer 1

If to check if a video exists or not, you might want to check this before loading the tag video. If the video exists you mount the tag, otherwise mount an error message in HTML for example.

To check if a file exists on the internet and is reachable by those browsing on your page, you can do so:

Without bliss jQuery:

function videoExisteEEhAlcancavel(urlVideo)
{
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status == 200;
}

With bliss jQuery:

$.ajax({
    url: urlDoVideo,
    type:'HEAD',
    error: function()
    {
        // grande chance de ser 404, mas pode ser 500.
        // você pode obter mais info se adicionar parâmetros
        // a este método e lê-los.
    },
    success: function()
    {
        // arquivo existe e é alcançável.
    }
});

Stealing Adapted from:

https://stackoverflow.com/questions/3646914/how-do-i-check-if-file-exists-in-jquery-or-javascript