如何使用JavaScript检查资源的可用性？

Question

如果我有一个视频文件的URL，如何显示该URL所指向的资源是否有效并存在，然后才能显示该资源？我已经看到一些建议使用AJAX的答案，但是我只知道AJAX发送和检索一些数据，而不是获取文件状态（无论是否存在）。

例如，如果我有一个URL，例如http://www.example.com/video.mp4，该如何检查是否video.mp4存在以及是否可以检索？

Answer 1

您实际上并不需要ajax，只需创建一个video元素，然后查看它是否可以加载源

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

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

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

video.src = 'http://www.example.com/video.mp4';

不同的浏览器播放不同的格式，要检查文件是否可以在当前浏览器中播放，可以使用canplaythrough事件

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

如果文件在同一个域中，并且端口和协议匹配，则可以使用ajax进行HEAD请求，以查看资源是否存在，但是跨域不起作用

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

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

http.send();