유튜브 동영상 썸네일의 경우,
동영상이 존재하지 않으면 유효하지 않은 썸네일 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
<input type="checkbox" id="checkbox2" name="cart" value="2">
<img border="0" src="https://img.youtube.com/vi/VALID_ID/hqdefault.jpg" width="191" height="" data-checkbox-id="checkbox2" /> 제목2
<input type="checkbox" id="checkbox3" name="cart" value="3">
<img border="0" src="https://img.youtube.com/vi/INVALID_ID/hqdefault.jpg" width="191" height="" data-checkbox-id="checkbox3" /> 제목3
<script>
document.addEventListener("DOMContentLoaded", function() {
const images = document.querySelectorAll('img');
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 요청이 필요하므로,
이미지 크기 검사 방식이 더 간단하고 즉각적입니다.
이 코드를 사용하면 유튜브 동영상의 썸네일이 "이미지 없음"일 때 해당 체크박스가 자동으로 선택됩니다.
'SMART GPT' 카테고리의 다른 글
Windows 서비스 관리자에서 Apache 서버가 멈췄을 때 시스템 자체를 재부팅 (0) | 2024.09.25 |
---|---|
phpMyAdmin에서 데이터베이스를 추가할 때 비밀번호와 권한을 바로 설정하는 방법 (0) | 2024.09.21 |
ORDER BY 절에서 사용할 수 있는 몇 가지 옵션 (0) | 2024.09.19 |
MySQL에서 테이블을 생성하고 입, 출력 해보자(입력,출력,페이지네이션,검색) (1) | 2024.09.16 |
이미지 URL이 유효하지 않을 때, 해당 이미지와 연결된 체크박스를 자동으로 체크 (0) | 2024.09.13 |
HTTPS로 접속한 사용자를 강제로 HTTP로 리디렉션 하려면 (0) | 2024.09.12 |
PHP에서 MP3 파일을 직접 읽고 스트리밍 하기 (1) | 2024.09.07 |
현재 페이지가 location.reload()에 의해 새로고침되었는지 ... (0) | 2024.09.07 |
댓글