Le miniature di YouTube spezzate non attivano la richiamata di errore

Question

Viene attivato un callback di errore dell'immagine se un'immagine è 404, ma l'host restituisce un'immagine comunque?

Sto cercando di determinare sul client se una miniatura di Youtube è valida prima di inviare l'URL al server. Normalmente è possibile generare un URL miniatura senza interrogare le loro API con il formato http://img.youtube.com/vi/**ID**/maxresdefault.jpg

Alcuni video non hanno miniature ad alta risoluzione, per esempio, questo: http://img.youtube.com/vi/ty62YzGryU4/maxresdefault.jpg

Tuttavia, una miniatura di qualità inferiore esiste sempre: http://img.youtube.com/vi/ty62YzGryU4/default.jpg

Idealmente vorrei essere in grado di rilevare se la miniatura ha fatto carico tramite questo frammento di codice, che definirei "fatto" quando si carica una miniatura valida:

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

Tuttavia, questo non è il caso - mentre vedo un errore 404 nella console, né il richiamo di onload né il richiamo di onerror si attivano, e quindi done non viene mai chiamato.

Se si imposta img.crossOrigin = "Anonymous", il richiamo di onerror viene attivato ... per ogni miniatura, a causa del maledetto criterio di condivisione delle risorse tra origini.

Ho anche cercato di crafting un XMLHttpRequest, ma inutilmente:

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

Se ho impostato X-Requested-With: XMLHttpRequest o no, il readyState va 1-4 ma lo stato è sempre zero!

C'è un modo per vedere se questa particolare immagine ha dato un 404 senza usare l'API?

Answer 1

Le miniature YouTube non attivano la funzione onerror() perché YouTube invia un'altra immagine gif base64 che mostra l'icona video vuota con risoluzione 120X90. (questa è la chiave della soluzione)

Si noti che è necessario caricare il tag immagine con l'immagine maxresdefault e assegnargli una determinata classe, ad es. "Youtube-thumb".

Per info: maxresdefault 1080, sddefault 720, hqdefault 480, mqdefault 360, default 240.

Secondo esperimenti limitati, 0.jpg è 480 o la migliore immagine a bassa risoluzione disponibile per un video.

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


     }); 

    });