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

Question

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

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

Answer 1

你真的不需要ajax，只需创建一个视频元素，看看它是否可以加载源

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 = '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();

Answer 2

您可以发送HEAD请求。 HEAD请求仅发回 HTTP 标头，因此，如果您获得的状态为 200 或 304，则表示资源存在，如果您获得 404，则表示资源不存在。