youtube html에 삽입하기(youtube iframe_api)
웹 개발을 하다보면 youtube를 브라우저에서 재생시키고싶을 때가 있다.
1. iframe삽입
공유 - 퍼가기를 하면
iframe태그가 나오는데, 복사해 html에 삽입하면 된다.
2. youtube iframe_api
youtube iframe_api를 사용하면 더욱 정교한 컨트롤이 가능해진다.
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
let player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
playerVars: {
'playsinline': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
let done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>1. <div> 태그는 IFrame API의 비디오 플레이어가 어디에 위치할지 식별한다. id는 3번의 video player를 로딩할 때 구분자로 쓰인다.
2. 해당 코드는 iframe_api 코드를 비동기적으로 불러온다.
3. onYouTubeIframeAPIReady함수는 API코드가 전부 다운로드 되면, 호출되는 함수이다.
여기서 YT.Player 오브젝트를 만들면 된다.
new YT.Player 첫번째 매개변수는 HTML element의 id로 API가 <iframe>태그를 삽일할 곳을 명시한다.
new YT.Player 두번째 매개변수는 player options를 명시한 객체입니다. 해당 객체는 다음을 포함합니다:
width (number) – 비디오 플레이어의 가로. default는 640.
height (number) – 비디오 플레이어의 세로. defalut는 390.
videoId (string) – Youtube video ID로 비디오를 식별하는 것
playerVars (object) – player를 커스터마이징 할 수 있는 player parameters를 속성으로 가지는 객체
- autoplay - 1로 하면 자동재생이 된다. (브라우저 정책으로 mute상태에서 해야함)
- controls - 0으로 하면 플레이어 컨트롤러가 보이지 않는다.
- disablekb - 1로하면 플레이어가 키보드 컨트롤을 응답하지 않는다.
- rel - 0으로 하면 연관 동영상이 보이지 않는다.
- loop - 1일경우 하나의 동영상이면 해당 비디오를 반복하고 플레이리스트일경우 처음 동영상에서 마지막 동영상까지 반복한다
- playsinline - ios에서 전체화면으로 재생할 건지. 1일경우 전체화면이 안된다.
- mute - 1일경우 음소거?(공식 문서에서는 없다. 블로그에는 있는데)
events (object) – 이 객체의 속성은 이벤트가 발생할 때 지정된 함수를 호출하는 것을 알아보게 한다.
4. onPlayerReady함수는 onReady이벤트가 발생할 때 실행되는 함수이다. 이 예제에서, video player가 준비되면 플레이가 시작될 것이다.
5. API는 플레이어가 재생, 멈춤, 끝내기 등의 플레이어 상태가 변할 때 onPlayerStateChange함수를 호출한다.
Operation
플레이어 API 메소드를 호출하기 위해서는 player object의 참조를 얻어야만 한다. 위에서는 new YT.Player를 하며 player라는 변수가 해당 역할이다.
Queueing functions
생략
Playback controls and player settings
player.playVideo():Void
비디오를 재생한다. 이 함수가 실행된 후 플레이어 상태는 playing(1)이다.
player.pauseVideo():Void
비디오를 멈춘다. 이 함수가 실행된 후 플레이어 상태는 ended(0) 또는 paused(2)이다.
player.stopVideo():Void
비디오를 멈추고 로딩을 취소한다. 보통 pauseVideo를 사용하지 해당 함수는 잘 사용하지 않는다.
player.seekTo(seconds:Number, allowSeekAhead:Boolean):Void
seconds에 명시된 시간으로 이동한다. allowSeekAhead는 버퍼링된 동영상을 벗어날경우 서버에 요청할지에 관한 것이다. true로 하면 된다.
player.mute():Void
플레이어를 음소거한다.
player.unMute():Void
플레이어를 음소거 해제한다.
player.isMuted():Boolean
플레이어가 음소거라면 true, 아니면 false를 반환한다.
player.setVolume(volume:Number):Void
볼륨을 세팅한다. 0에서 100사이의 정수만 가능하다.
player.getVolume():Number
현재의 볼륨을 0에서 100사이의 정수를 반환한다. 이 함수는 플레이어가 음소거라도 볼륨을 반환한다.
player.setSize(width:Number, height:Number):Object
플레이어가 담긴 <iframe>을 픽셀 단위로 사이즈를 설정한다.
player.getPlaybackRate():Number
재생속도를 얻는다. 0.25, 0.5, 1, 1.5, 2 같은 수치를 얻을 것이다.
player.setPlaybackRate(suggestedRate:Number):Void
재생속도를 설정한다.
player.getAvailablePlaybackRates():Array
가능한 재생 속도를 배열 형태로 얻는다.
player.getPlayerState():Number
-1 – unstarted 0 – ended 1 – playing 2 – paused 3 – buffering 5 – video cued
player.addEventListener(event:String, listener:String):Void
player.removeEventListener(event:String, listener:String):Void
Events
onReady
onStateChange
onPlaybackQualityChange
onPlaybackRateChange
onError
플레이어에 event객체를 전달한다. 객체의 data속성은 오류유형을 식별하는 정수이다.
100 – 요청한 동영상을 찾을 수 없습니다. 어떠한 이유로든 동영상이 삭제되었거나 비공개로 표시된 경우에 이 오류가 발생합니다.
101,150 - 요청한 동영상의 소유자가 내장 플레이어에서 동영상을 재생하는 것을 허용하지 않습니다.
onApiChange
참조: https://developers.google.com/youtube/iframe_api_reference?hl=ko