[HTML5] video / audio onloadeddata 로딩완료 이벤트 - 비디오 자동 재생하기

<video>태그가 완전히 로드될때,  javascript 실행하기 하는 이벤트 요소(Attribute)입니다.

 

HTML  Audio/Video DOM loadeddata Event

 

해당 프레임에서 비디오/오디오가 로딩이 완료되면 실행되 었는지 확인 해주는 이벤트입니다.

 

onloadedata 이벤트

 

onloadeddata 이벤트를 이용해서, 자동 플레이도 만들 수 있습니다.

(하단 '자동 플레이 예제'를 참조하세요)

 

Syntax

In HTML:

<audio|video onloadeddata="Some JavaScript Code">

 

In JavaScript:

<script>
audio|video.onloadeddata='Some JavaScript Code';
</script>

 

Using addEventListener():

<script>
audio|video.addEventListener("loadeddata", function() {
  //SomeJavaScriptCode
  }
);
</script>

 

 

 

예제

<video id="videoObj" controls="true" onloadeddata="playJump('videoObj',5)">
    <source src="http://html5.edit.kr/video/mov_bbb.mp4" type="video/mp4" />
</video>

 

<script>

function playJump(obj,time) {

var videoObj = document.getElementById(obj);

videoObj.currentTime = time;

}

</script>

 

 

자동 플레이 예제

<video id="myVideo" width="320" height="176" controls muted="muted">
  <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<script>
var vid = document.getElementById("myVideo");
vid.onloadeddata = function() {
  alert("Browser has loaded the current frame");
  myVideo.play();
};
</script>

자동 플레이 경우, muted="muted" 속성이 있어야 자동 재생이 됩니다.

음소거(muted)로 되어 있지 않은 비디오는 자동 재생이 안됩니다.

그 이유는, 음소거(mute)가 안된 비디오는 브라우저(크롬, 사파리, Edge등)에서 자동 재생을 차단합니다.

 

2019.04.12 - [분류 전체보기] - video 태그 autoplay 재생이 안될때 (Chrome / Safari)

video 태그 autoplay 재생이 안될때 (Chrome / Safari)

 

 

참고: http://www.w3schools.com/tags/av_event_loadeddata.asp