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

【问题标题】：How to check the availability of a resource using JavaScript?如何使用 JavaScript 检查资源的可用性？
【发布时间】：2017-10-16 11:44:55
【问题描述】：

如果我有一个视频文件的 URL，我如何检测该 URL 指向的资源是否有效并且在显示之前是否存在？我看过一些建议使用 AJAX 的答案，但我只知道 AJAX 用于发送和检索一些数据，而不是获取文件是否存在的状态。

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

【问题讨论】：

标签： javascript ajax

【解决方案1】：

你真的不需要ajax，只需要创建一个video元素，看看能不能加载源

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

【讨论】：

不过，这仅适用于 HTML5。
@g.tsh - 你还怎么播放视频？有 Flash，但你需要一个专用的播放器
这正是我所需要的！我只需要再问一件事：创建视频元素后，如何将视频元素插入到文档中我想要的位置？我以前从未使用过 HTML5 视频，我记得读过使用 HTML5 视频可以只使用简单的 HTML 而不涉及 javascript。所以我不知道javascript如何在文档中的特定位置添加和播放HTML5视频元素。谢谢！（哦，视频在不同的域中，所以我想我不能使用 AJAX ..）

【解决方案2】：

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

【讨论】：