Javascript 损坏的Youtube缩略图不会触发错误回调

如果映像为404，但主机仍返回映像，是否会触发映像错误回调

在将URL提交到服务器之前，我试图在客户端上确定Youtube缩略图是否有效。通常，您可以生成缩略图URL，而无需使用

http://img.youtube.com/vi/**ID**/maxresdefault.jpg

某些视频没有高分辨率缩略图，例如，此视频：

但是，始终存在质量较低的缩略图：

理想情况下，我能够通过以下代码段检测缩略图是否加载，当加载有效缩略图时，该代码段将调用“done”：

var id = "ty62YzGryU4"
var tries = 0
var thumb = "http://img.youtube.com/vi/" + id + "/maxresdefault.jpg"
var img = new Image ()
img.onload = function(){ console.log('ok'); done(id, thumb) }
img.onerror = function(){
    switch (tries++){
        case 0:
            img.src = thumb = "http://img.youtube.com/vi/" + id + "/hqdefault.jpg"
            break;
        case 1:
            img.src = thumb = "http://img.youtube.com/vi/" + id + "/default.jpg"
            break;
        case 2:
            done(id, thumb)
            break;
    }
}
img.src = thumb
if (img.complete) img.onload()

然而事实并非如此——虽然我在控制台中看到404错误，但onload和onerror回调都不会触发，因此永远不会调用

done

如果我设置了

img.crossOrigin=“Anonymous”

OneError回调将触发。。。因为可恶的跨源资源共享政策，每一个缩略图

我还尝试制作一个XMLHttpRequest，但无济于事：

xmlhttp = new XMLHttpRequest()
xmlhttp.onreadystatechange = function() {
    console.log(xmlhttp.readyState)
    console.log(xmlhttp.status)
};
xmlhttp.open('GET', url, true);
xmlhttp.send(null);

无论我是否使用：XMLHttpRequest设置

X-request，readyState都从
1
变为
4
，但状态始终为零

是否有任何方法可以查看此特定图像是否在不使用API的情况下显示404？
YouTube缩略图不会启动onerror（）函数，因为YouTube会发送另一个base64 gif图像，该图像显示分辨率为120X90的空视频图标。（这是解决方案的关键）

请注意，您应该使用maxresdefault图像加载图像标记，并给它或（它们）一个特定的类，例如“youtube thumb”

有关信息：maxresdefault 1080、sddefault 720、hqdefault 480、mqdefault 360、default 240

根据有限的实验，0.jpg是480或视频可用的最佳低分辨率图像

        $(function()
        {

        $('.youtube-thumb').each(function(ix, it){

            if($(it)[0].naturalHeight <= 90 )
           {
            var path = $(it).attr('src');
            var altpath = path.replace('maxresdefault.jpg','0.jpg');

            $(it).attr('src', altpath);
            }


        });

    });

$（函数（）
{
$（'.youtube thumb'）。每个（函数（ix，it）{
if（$（it）[0].naturalHeight我知道这个问题有点老了，但我今天遇到了同样的问题，我想给大家我的解决方案，它从最好的到最坏的尝试所有YouTube缩略图

我对不同选项的“排名”是：

maxresdefault
mqdefault->除1）之外，只有一个没有黑色边框
sddefault
hqdefault
默认->工作100%
这是我的密码

function youtube_check(e) {
    var thumbnail = ["maxresdefault", "mqdefault", "sddefault", "hqdefault", "default"];
    var url = e.attr("src");
    if (e[0].naturalWidth === 120 && e[0].naturalHeight === 90) {
        for (var i = 0, len = thumbnail.length - 1; i < len; i++) {
            if (url.indexOf(thumbnail[i]) > 0) {
                e.attr("src", url.replace(thumbnail[i], thumbnail[i + 1]));
                break;
            }
        }
    }
}

<img onload="youtube_check($(this))" src="https://i3.ytimg.com/vi/---ID---/maxresdefault.jpg">

功能检查（e）{
var thumbnail=[“maxresdefault”、“mqdefault”、“sddefault”、“hqdefault”、“default”]；
var url=e.attr（“src”）；
如果（e[0]。自然宽度===120&&e[0]。自然高度===90）{
对于（变量i=0，len=thumbnail.length-1；i0）{
e、 attr（“src”，url.replace（缩略图[i]，缩略图[i+1]）；
打破
}
}
}
}
我会通过chrome中的inspector检查firefox的live http头或类似的东西，但最终你可能会使用api。-Juuuelz santana