본문 바로가기

웹/HTML / Javascript

동영상 재생 끝나는 시점 제어

만약 어떤 사이트에서

인트로 영상을 띄운 뒤 메인 페이지로 넘어가게 짠다고 치자.

그냥 플래시 같은 경우면, 타임라인의 마지막에 getURL("주소") 이런식으로 한줄 넣어주면 되겠지만,

html에서 직접 동영상을 올려 재생하는 경우면 난감해진다. 그렇다고 로딩시간, 전송시간 고려 안하고

setTimeout() 써버릴 수는 없으니 말이다.. 근데 찾아보니 방법이 있었다;; -_-

일단 html5가 지원된다면..

<script>

if(window.addEventListener)    {

window.addEventListener('load', function()    {

if(window.HTMLVideoElement)    {

var player = document.getElementById('player');

player.addEventListener("ended", function()    {

//이 부분이 실행된다

alert("재생 종료");

});

}

}, false);

}

</script>

이걸 <head>에 넣고, <body>에는

<video id='player' (각종 속성은 알아서..) >

<source src='소스주소' >

</video>

이런 식으로 작성한다. 새로 생긴 video 태그 자체의 이벤트를 받아 제어하는 것 같다.

(사실 작업환경이 html5가 불가능 하므로 직접 해보지는 못했다 ㅠㅠ)

 

만약 html5 미만의 환경이라면..

<head>

<script for='ie_player' event='PlayStateChange(NewState)' type='text/javascript'>

if(NewState == 8)    {

//여기가 실행된다

alert('재생 종료');

}

</script>

</head>

--------------------------------------

<body>

<object id='ie_player' classid='CLSID:6BF52A52-394A-11d3-B15300C04F79FAA6' (속성은 알아서들..)  >

<param name='AutoStart' value='true'>

<param name='URL' value='(주소 입력)'>

<param name='PlayCount' value='1'>

<param name='uiMode' value='full'>

</object>

</body>

이런식으로 object 태그를 사용하면 된다.