• 회원가입
  • 로그인
  • 구글아이디로 로그인

[attribute] HTML - onloadstart 속성 - 미디어 로드 시작 시 실행 (= onloadstart속성 = 온로드스타트속성) ※ onloadstart이벤트 = 온로드스타트이벤트 ※ 브라우저가 지정 미디어를 찾기 시작할 때 실행

목차
  1. onloadstart 예제 - <audio> 경우
  2. onloadstart 정의
  3. onloadstart 구문
  4. onloadstart 예제 - <video> 경우

 

onloadstart 예제 - <audio> 경우

 

<audio id="hz" controls onloadstart="homzzang()">

  <source src="music.ogg" type="audio/ogg">

  <source src="music.mp3" type="audio/mpeg">

  당신 브라우저는 audio 태그 지원 X

</audio>


<script>

function homzzang() {

  alert("브라우저가 지정 미디어를 찾기 시작할 때 실행");

}

</script>

 


 

<audio id="hz" controls>

  <source src="music.ogg" type="audio/ogg">

  <source src="music.mp3" type="audio/mpeg">

  당신 브라우저는 audio 태그 지원 X

</audio>


<script>

var hz = document.getElementById("hz");

hz.onloadstart = function() {

  alert("브라우저가 지정 미디어를 찾기 시작할 때 실행");

};

</script>

 

 

onloadstart 정의

 

브라우저가 지정 오디오/비디오를 찾기 시작할 때 실행할 코드 지정.
(= 미디어 로드 프로세스 시작 시 실행.)

 


 

1. onloadstart 속성 사용 가능 태그 종류

<audio>, <video>

 

2. (audio/video) 로드 시, 아래 순서로 아래 이벤트들이 발생.


3.

IE9 이상 모든 브라우저 지원.

 

 

onloadstart 구문

 

HTML 방식

  • <element onloadstart="myScript">

 

JS 방식 (3가지)

  • object.onloadstart = ()=>{myScript};
  • object.onloadstart = function(){myScript};
  • object.addEventListener("loadstart", myScript);



[속성값]

 

myScript

브라우저가 지정 미디어를 찾기 시작할 때, 실행할 JS 코드

  • 주의: 함수명 사용 시, 다른 곳은 전부 소괄호까지 사용해 함수 호출하나 핑크색 myScript 자리는 "함수명만" 사용해 함수 호출.
  • 사용 방식 통일 권장.

 


onloadstart 예제 - <video> 경우

 

<video id="hz" width="560" height="315" controls onloadstart="homzzang()">

  <source src="movie.mp4" type="video/mp4">

  <source src="movie.ogg" type="video/ogg">

  당신 브라우저는 video 태그 지원 X

</video>


<script>

function homzzang() {

  alert("브라우저가 지정 미디어를 찾기 시작할 때 실행");

}

</script>

 


 

<video id="hz" width="560" height="315" controls>

  <source src="movie.mp4" type="video/mp4">

  <source src="movie.ogg" type="video/ogg">

  당신 브라우저는 video 태그 지원 X

</video>


<script>

var hz = document.getElementById("hz");

hz.onloadstart = function() {

  alert("브라우저가 지정 미디어를 찾기 시작할 때 실행");

};

</script>

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
attribute HTML - srcdoc 속성 - 아이프레임(iframe) src 속성 내용 대체할 태그내용 지정 (= sr…
attribute HTML - srclang 속성 - 트랙태그 소스의 언어코드 지정 (= srclang속성 = 에스알시랭속성/…
attribute HTML - srcset 속성 - 다른 환경에서 적용할 이미지소스 지정 (= srcset속성 = 에스알시셋속…
attribute HTML - start 속성 - 순서있는 리스트 시작값 설정 (= start속성 = 스타트속성) ※ 오엘태그…
attribute HTML - step 속성 - 입력 가능 숫자 간격 설정 (= step속성 = 스텝속성) ※ 입력 가능 배수…
attribute HTML - style 속성 ★ - 인라인 스타일 지정 (= style속성 = 스타일속성)
attribute HTML - tabindex 속성 - 탭색인번호 지정 (= tabindex속성 = 탭인덱스속성) ※ 탭넵비게…
attribute HTML - target 속성 ★ - (링크된 문서 열 곳 / 폼 제출할 곳) 지정 (= target속성 =…
attribute HTML - title 속성 ★ - 요소애 대한 추가 정보 지정 (= title속성 = 타이틀속성)
attribute HTML - translate 속성 - 요소 내용 번역 허용 여부 지정 (= translate속성 = 트랜슬…
attribute HTML - type 속성 ★★★ - 요소 타입 지정 (= type속성 = 타입속성)
attribute HTML - usemap 속성 - 이미지를 이미지맵으로 지정 (= usemap속성 = 유즈맵속성|유스맵속성)
attribute HTML - value 속성 ★★★ - 요소값 지정 (= value속성 = 밸류속성) ※ 초기값/기본값/현재…
attribute HTML - width 속성 - 너비 지정 (= width속성 = 위드스속성) ※ 가로길이 설정
attribute HTML - wrap 속성 - FORM 제출 시, TEXTAREA 텍스트 감싸기 (= wrap속성 = 랩속성…
etc HTML - 일정시간 후 페이지 이동/납치
deprecated HTML - <marquee> 태그 - 요소 내용 자동 스크롤 이동 영역 지정 (= marquee태그 = 마…
attribute HTML - rev 속성 - (HTML5 지원 X) 현재 웹문서가 타웹문서와 어떤 관계인지 지정 (= re…
image HTML - <picture> 태그 - 해상도 크기에 따라 다른 이미지 표시 지정 (= picture태그 =…
attribute HTML - formtarget 속성 - 폼데이터 전달할 폼 지정 (= formtarget속성 = 폼타겟속성…
16/18
목록
찾아주셔서 감사합니다. Since 2012