JavaScript로 YouTube 동영상 정지하는 방법 완벽 가이드

JavaScript로 YouTube 동영상을 정지하는 방법

YouTube에서 재생 중인 동영상을 JavaScript로 제어하려면 먼저 임베디드 플레이어에 대한 유효한 참조(reference)를 확보해야 합니다. 가장 확실한 방법은 Firebug와 같은 개발자 도구를 사용해 페이지의 HTML DOM 구조를 검사하고, 플레이어 요소의 id 속성(예: "player_id")을 확인하는 것입니다.

1. 플레이어 요소 확인하기

다음은 YouTube API를 활성화하여 임베드한 플레이어의 예시입니다. 핵심은 enablejsapi=1 파라미터가 포함되어 있어야 JavaScript 제어가 가능하다는 점입니다.

<embed id="player_id" width="100%" height="100%" allowfullscreen="true"
    allowscriptaccess="always" quality="high" bgcolor="#FFFFFFF" name="playerid"
    src="https://www.youtube.com/apiplayerbeta?enablejsapi=1&playerapiid=normalplayer"
    type="application/x-shockwave-flash">

2. stopVideo() 메서드 호출하기

플레이어 참조(player_id)를 확보했다면, 다음과 같이 getElementById()로 요소를 가져온 뒤 stopVideo() 메서드를 호출하여 동영상을 정지할 수 있습니다.

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

추가 팁

• 동영상 일시정지: 완전히 정지하지 않고 현재 위치에서 멈추려면 pauseVideo() 메서드를 사용하세요.
• 동영상 다시 재생: playVideo() 메서드로 재생을 재개할 수 있습니다.
• 최신 권장 방식: 위 예시는 구형 Flash 기반 플레이어를 사용합니다. 현재는 HTML5 <iframe> 기반의 YouTube IFrame Player API를 사용하는 것이 표준이며, 보안과 호환성 측면에서 훨씬 안정적입니다.

이처럼 플레이어의 DOM 참조만 정확히 얻으면, YouTube Player API가 제공하는 다양한 메서드를 통해 동영상 재생을 자유롭게 제어할 수 있습니다.