목차
- onabort 예제 -<audio> 경우
- onabort 정의
- onabort 구문
- onabort 예제 - <embed> 경우
- onabort 예제 - <img> 경우
- onabort 예제 - <object> 경우
- onabort 예제 - <video> 경우
onabort 예제 -<audio> 경우
<audio id="hz" onabort="alert('Video 로드 중단됨')">
...
</audio>
<audio id="hz" onabort="homzzang()" />
...
</audio>
<script>
function homzzang() {
console.log("오디오 파일 로드 중단됨.");
}
</script>
onabort 정의
이미지, 오디오, 비디오) 등의 미디어 파일 로드가 중단된 경우 실행할 스크립트 정의.
1. onabort 속성 사용 가능 태그 종류
<audio>, <embed>, <img>, <object>, <video>
2.
이 이벤트는 오류 때문이 아니라 미디어 데이터 다운로드 중단 시 발생.
3.
주요 최신 브라우저 모두 지원.
- 단, edge 경우, (embed/object) 지원 X
- 윈도우7 IE11 이하 경우, abort 이벤트 작동 X
onabort 구문
HTML 방식
- <element onabort="myScript">
JS 방식 (3가지)
- object.onabort = ()=>{myScript};
- object.onabort = function(){myScript};
- object.addEventListener("abort", myScript);
[속성값]
myScript
미디어 로드 중단된 경우, 실행할 JS 코드
- 주의: 함수명 사용 시, 다른 곳은 전부 소괄호까지 사용해 함수 호출하나 핑크색 myScript 자리는 "함수명만" 사용해 함수 호출.
- 사용 방식 통일 권장.
onabort 예제 - <embed> 경우
<embed src="document.pdf" type="application/pdf" onabort="console.log("Document 로드 중단됨.");" />
<embed src="document.pdf" type="application/pdf" onabort="homzznag()" />
<script>
function homzzang() {
console.log("Document 로드 중단됨.");
}
</script>
onabort 예제 - <img> 경우
<img src="image.png" onabort="console.log("이미지 로드 중단됨.");" />
<img src="image.png" onabort="homzzang()" />
<script>
function homzzang() {
console.log("이미지 로드 중단됨.");
}
</script>
onabort 예제 - <object> 경우
<object data="movie.mp4" type="video/mp4" onabort="console.log("Video 로드 중단됨.!");"></object>
<object data="movie.mp4" type="video/mp4" onabort="homzznag()"></object>
<script>
function homzzang() {
console.log("Video 로드 중단됨.!");
}
</script>
onabort 예제 - <video> 경우
<video id="hz" onabort="alert('Video 로드 중단됨')">
...
</video>
<video id="hz" onabort="homzzang()">
...
</video>
<script>
function homzzang() {
console.log("Video 로드 중단됨.!");
}
</script>
