Skip to content

How to check the availability of a resource using JavaScript?

If I have a URL to a video file, how can I detect if the resource pointed by the URL is valid and exists before it can be displayed? I’ve seen some answers suggesting AJAX, but I only know AJAX to send and retrieve some data, not to get the status of the file whether it exists or not.

For example, if I have a URL like, how could I check whether video.mp4 exists or not and can or cannot be retrieved?


You don’t really need ajax, just create a video element, and see if it can load the source

var video = document.createElement('video');

video.onload = function() {
    alert('success, it exist');
    // show video element

video.onerror = function() {
    alert('error, couldn't load');
    // don't show video element

video.src = '';

Different browsers play different formats, to check if the file can be played in the current browser, you can use the canplaythrough event

video.oncanplaythrough = function() {
    alert("This file can be played in the current browser");

if the file is on the same domain, and ports and protocol match, you can use ajax to do a HEAD request and see if the resource exists, but that won’t work cross-domain

var http = new XMLHttpRequest();'HEAD', '/folder/video.mp4');

http.onreadystatechange = function() {
    if (this.readyState == this.DONE) {
        if (this.status != 404) {
          // resource exists