깨진 유튜브 썸네일이 오류 콜백을 발생시키지 않습니다.

Question

이미지가 404이지만 호스트가 이미지를 반환하면 이미지 오류 콜백이 실행됩니까?

URL을 서버에 제출하기 전에 YouTube 미리보기 이미지가 유효한지 클라이언트에서 확인하려고합니다. http://img.youtube.com/vi/ty62YzGryU4/maxresdefault.jpg

그러나, 낮은 품질의 축소판이 항상 존재합니다 보통의 형식으로 자신의 API를 쿼리하지 않고 썸네일 URL을 생성 할 수 있습니다 http://img.youtube.com/vi/**ID**/maxresdefault.jpg

일부 비디오는 예를 들어, 하나, 고해상도 미리보기가 없습니다 : 이상적으로 http://img.youtube.com/vi/ty62YzGryU4/default.jpg

나는 유효한 미리로드 할 때 "완료"를 호출 할이 코드를 통해 썸네일 부하를했다 여부를 감지 할 수있을 것입니다 :

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"을 설정하면 저해상도 크로스 원본 리소스 공유 정책으로 인해 모든 축소판에 대해 onerror 콜백이 실행됩니다.

는 또한하지만 아무 소용, XMLHttpRequest를 공예 시도 : 나는 1에서 4에 X-Requested-With: XMLHttpRequest 여부는 readyState가가는 설정되어 있지만 상태가 항상 0입니다

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

여부!

특정 이미지가 API를 사용하지 않고 404를 제공했는지 확인할 방법이 있습니까?

Answer 1

YouTube는 해상도가 120X90 인 빈 비디오 아이콘을 표시하는 다른 base64 gif 이미지를 보내므로 YouTube 축소판은 onerror() 기능을 실행하지 않습니다. (이것은 솔루션의 핵심입니다)

이미지 태그를 maxresdefault 이미지와 함께로드하고 특정 클래스를 제공해야합니다. "youtube-thumb". 정보에 대한

: maxresdefault 1080 sddefault (720), (360) mqdefault, 480 hqdefault, 기본 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); 
      } 


     }); 

    });