首先，我想指出，我知道 JavaScript 的跨域问题。 我不会认为这是可能的，除非我在控制台中看到 404/200 响应代码。
意图... 我正在开发一个网站原型，该原型基于许多可能的文件选项显示视频播放器。 我正在尝试创建这样的逻辑： 如果该文件可用，请播放 如果不可用，请尝试其他文件 如果该文件可用，则播放它 如果不可用，请尝试其他文件 等等...
首先，我尝试使用 XMLHttpRequest() 来实现。 问题是我无法弄清楚如何执行 if/else 逻辑，因为您必须在 .open() 中指定 url。 我发现 jQuery 的 .ajax() 函数有一个错误/成功选项。 那时，我认为我可以将 .ajax() 嵌套在错误中。 考虑到这一点，它正在部分发挥作用。 我收到 Access-Control-Allow-Origin 错误，但我也收到合法的 404/200 响应。 所以，我的问题是“如何将这些 404/200 响应合并到我的代码中？”
JavaScript（请让我知道更好的方法）...
function getSermonVideo() {
"use strict";
const params = new URLSearchParams(document.location.search);
const filename = params.get("filename");
const site = params.get("site");
let date = params.get("date");
let shortdate = date.slice(2);
shortdate = shortdate.replaceAll("-", "");
const editedvideourl = "https://flcmedia.org/productvideo/";
const editedaudiourl = "https://flcmedia.org/product/";
let uneditedurl = "https://flcmedia.org/" + site + "/";
jQuery.ajax({
url:editedvideourl + filename + ".mp4",
type:'HEAD',
error: function() {
jQuery.ajax({
url:editedvideourl + filename + "_480.mp4",
type:'HEAD',
error: function() {
jQuery.ajax({
url:editedaudiourl + filename + ".mp3",
type:'HEAD',
error: function() {
jQuery.ajax({
url: uneditedurl + "MP4/" + date.slice(0, 4) + "/" + shortdate + "Video.mp4",
type:'HEAD',
error: function() {
jQuery.ajax({
url: uneditedurl + "MP3/" + date.slice(0, 4) + "/" + shortdate + "Audio.mp3",
type:'HEAD',
error: function() {
//console.log("No file exists.");
},
success: function() {
videoplayer.src = uneditedurl + "MP3/" + date.slice(0, 4) + "/" + shortdate + "Audio.mp3"
}
});
},
success: function() {
videoplayer.src = uneditedurl + "MP4/" + date.slice(0, 4) + "/" + shortdate + "Video.mp4"
}
});
},
success: function() {
videoplayer.src = editedaudiourl + filename + ".mp3";
}
});
},
success: function() {
videoplayer.src = editedvideourl + filename + "_480.mp4";
}
});
},
success: function() {
videoplayer.src = editedvideourl + filename + ".mp4";
}
});
}
Edge 开发者工具 - 控制台...
Access to XMLHttpRequest at 'https://flcmedia.org/productvideo/1214-GodsIncorruptibleWordSeed-01-HisWordIsMedicine.mp4' from origin 'https://anti-exe.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
HEAD https://flcmedia.org/productvideo/1214-GodsIncorruptibleWordSeed-01-HisWordIsMedicine.mp4 net::ERR_FAILED 200 (OK)
Access to XMLHttpRequest at 'https://flcmedia.org/productvideo/1214-GodsIncorruptibleWordSeed-01-HisWordIsMedicine_480.mp4' from origin 'https://anti-exe.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
HEAD https://flcmedia.org/productvideo/1214-GodsIncorruptibleWordSeed-01-HisWordIsMedicine_480.mp4 net::ERR_FAILED 404 (Not Found)
Access to XMLHttpRequest at 'https://flcmedia.org/product/1214-GodsIncorruptibleWordSeed-01-HisWordIsMedicine.mp3' from origin 'https://anti-exe.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
HEAD https://flcmedia.org/product/1214-GodsIncorruptibleWordSeed-01-HisWordIsMedicine.mp3 net::ERR_FAILED 200 (OK)
Access to XMLHttpRequest at 'https://flcmedia.org/FLCSarasota/MP4/2017/171126Video.mp4' from origin 'https://anti-exe.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
HEAD https://flcmedia.org/FLCSarasota/MP4/2017/171126Video.mp4 net::ERR_FAILED 200 (OK)
Access to XMLHttpRequest at 'https://flcmedia.org/FLCSarasota/MP3/2017/171126Audio.mp3' from origin 'https://anti-exe.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
HEAD https://flcmedia.org/FLCSarasota/MP3/2017/171126Audio.mp3 net::ERR_FAILED 200 (OK)
Access to fetch at 'https://flcmedia.org/productvideo/1214-GodsIncorruptibleWordSeed-01-HisWordIsMedicine.mp4' from origin 'https://anti-exe.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
GET https://flcmedia.org/productvideo/1214-GodsIncorruptibleWordSeed-01-HisWordIsMedicine.mp4 net::ERR_FAILED 200 (OK)
因此，如您所见，我收到一些文件返回的值为 200，而其他文件返回的值为 404。 如果我可以使用该信息，那么我可以创建 if/else 逻辑来执行我正在尝试的操作。 你有什么想法吗？
这并没有具体解决200/404逻辑，但我能够做我想做的事情（尝试这个文件，如果它不起作用尝试那个文件，如果不起作用尝试另一个文件） .
const videoplayer = document.getElementById("videoplayer");
function getSermonVideo() {
"use strict";
const params = new URLSearchParams(document.location.search);
const filename = params.get("filename");
const site = params.get("site");
const number = params.get("number");
let date = params.get("date");
let shortdate = date.slice(2);
shortdate = shortdate.replaceAll("-", "");
const editedvideourl = "https://flcmedia.org/productvideo/";
const editedaudiourl = "https://flcmedia.org/product/";
let uneditedurl = "https://flcmedia.org/" + site + "/";
// default video file
videoplayer.src = editedvideourl + filename + "_480.mp4";
videoplayer.onerror = function () {
console.log("Edited _480.mp4 not available.");
videoplayer.src = editedvideourl + filename + ".mp4";
videoplayer.onerror = function () {
console.log("Edited .mp4 not available.");
videoplayer.src = editedaudiourl + filename + ".mp3";
videoplayer.onerror = function () {
console.log("Edited .mp3 not available.");
videoplayer.src = uneditedurl + "MP4/" + date.slice(0, 4) + "/" + shortdate + "Video.mp4";
videoplayer.onerror = function () {
console.log("Unedited .mp4 not available.");
videoplayer.src = uneditedurl + "MP3/" + date.slice(0, 4) + "/" + shortdate + "Audio.mp3";
videoplayer.onerror = function () {
console.log("Unedited .mp3 not available.");
};
};
};
};
};
}
我确信有更好的方法可以做到这一点，但它确实有效。
它可能适用于更现代的代码（如提到的 CBrow）...
videoplayer.addEventListener("error", () => {
videoplayer.src = editedaudiourl + filename + ".mp3";
});
但我不知道如何嵌套它们。
.onerror