유튜브 동영상의 썸네일 이미지를 체크하여 유효한 영상이아닐때 연결된 체크박스를 자동으로 체크
2년 전
유튜브 동영상 썸네일의 경우,
동영상이 존재하지 않으면 유효하지 않은 썸네일 URL을 요청할 때 기본 "이미지 없음" 이미지가 로드됩니다.
이 이미지는 YouTube 서버에서 제공하기 때문에 onerror 이벤트가 발생하지 않습니다.
따라서 onerror를 이용한 방식으로는 유효하지 않은 동영상 썸네일을 감지할 수 없습니다.
대신, 유튜브 API를 사용하여 동영상이 존재하는지 확인하거나,
이미지의 크기를 검사하여 "이미지 없음" 이미지를 감지할 수 있습니다.
후자의 방법이 더 간단하므로, 이를 설명하겠습니다.
이미지 크기 검사 방식
YouTube의 "이미지 없음" 이미지의 크기는 일반적으로 고정되어 있습니다.
예를 들어, 가로와 세로 크기가 작은 기본 이미지를 사용할 수 있습니다.
따라서, 이미지 로딩이 완료된 후 이미지 크기를 검사하여 이를 감지할 수 있습니다.
코드 예제
아래 코드는 유튜브 썸네일이 "이미지 없음"인 경우 자동으로 체크박스를 체크하는 방법입니다.
<!-- 체크박스와 유튜브 동영상 썸네일 이미지 목록 -->
<input type="checkbox" id="checkbox1" name="cart" value="1">
<img border="0" src="https://img.youtube.com/vi/INVALID_ID/hqdefault.jpg" width="191" height="" data-checkbox-id="checkbox1" /> 제목1
images.forEach((img) => {
img.onload = function() {
// 이미지가 로드된 후, 너비와 높이를 확인하여 "이미지 없음" 이미지인지 체크
if (img.naturalWidth === 120 && img.naturalHeight === 90) {
const checkboxId = img.getAttribute('data-checkbox-id');
if (checkboxId) {
document.getElementById(checkboxId).checked = true; // 체크박스 자동 체크
}
}
};
});
});
</script>
코드 설명
1, onload 이벤트 사용:
각 이미지에 대해 onload 이벤트 핸들러를 추가합니다.
이미지를 로드한 후, 이미지의 자연 크기(naturalWidth와 naturalHeight)를 확인합니다.
2, 이미지 크기 검사:
YouTube의 "이미지 없음" 이미지의 크기는 일반적으로 작습니다(예: 120x90 픽셀).
로드된 이미지의 크기를 확인하여 이 크기 이하인 경우, "이미지 없음"으로 간주하고, 해당 체크박스를 자동으로 체크합니다.
3, 데이터 속성 (data-checkbox-id) 사용:
각 이미지에 data-checkbox-id 속성을 사용하여, 이미지가 유효하지 않을 때 체크해야 할 체크박스의 ID를 지정합니다.
유튜브 API 사용
만약 정확하게 유튜브 동영상의 유효성을 검사하고 싶다면,
YouTube Data API를 이용하여 동영상 ID를 확인하고 동영상이 존재하는지 확인할 수 있습니다.
하지만 이는 추가적인 API 키와 HTTP 요청이 필요하므로,
이미지 크기 검사 방식이 더 간단하고 즉각적입니다.
이 코드를 사용하면 유튜브 동영상의 썸네일이 "이미지 없음"일 때 해당 체크박스가 자동으로 선택됩니다.
추천 : 
