프로젝트 진행 중 페이지에 유튜브 영상을 삽입해야 했다.
youtube api 를 이용했으며 이를 기록해보고자 한다.
1. 단순한 iframe 태그로 삽입하는 방법.
사용자의 자유도가 좀 떨어지며 별로 권장되진 않는다.
방법은 너무 쉽기 때문에 따로 포스팅하지 않겠다.
2. youtube API를 이용해 플레이어를 삽입한다.
=> youtube DEVELOPERS 사이트에서 플레이어 API를 제공하기 때문에, javascript 코드에 비디오 ID만 삽입해 넣으면 플레이어 크기, 플레이어 상태( stop or playing), 플레이어 소리 크기...을 자유롭게 지정할 수 있다.
<HTML 코드>
: 해당 div 태그는 IFRAME API가 동영상 플레이어를 배치할 페이지의 위치를 식별한다. 이 API에서는 div 태그를 iframe 태그로 대체한다. 또는 IFRAME 요소를 직접 삽입할 수도 있다.
<div id="player"></div>
<!--플레이어를 불러올 영역><javascript 코드>
=> 동영상 플레이어에 본인이 원하는 기능을 자유롭게 지정할 수 있다.
1) onYouTubeIframeAPIReady() 함수는 플레이어 API 코드가 다운로드되는 즉시 실행된다. 코드에서 이 부분이 삽입한 동영상 플레이어를 참조하는 전역 변수 player를 정의하며, 함수가 동영상 플레이어 개체를 구성한다.
2) onReady 이벤트가 실행될 때, onPlayerReady 함수가 실행된다. 이 함수는 동영상 플레이어가 준비되면 재생을 시작해야 함을 의미한다. ( 플레이어 로딩될때까지 재생을 보류)
3) 플레이어의 상태가 변경되면 API가 onPlayerStateChange 함수를 호출하여 이 상태는 플레이어 재생 중, 일시중지됨, 완료됨 등을 나타낼 수 있다.
//youtube API 불러오는 부분
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
//플레이어 변수 설정
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
//width&height를 설정할 수 있으나, 따로 css영역으로 뺐다.
videoId: 'sEOuJ4z5aTc',
events: {
'onReady': onPlayerReady,//로딩중에 이벤트 실행한다
'onStateChange': onPlayerStateChange//플레이어 상태 변화 시 이벤트를 실행한다.
}
});
}
function onPlayerReady(event) {
//로딩된 후에 실행될 동작을 작성한다(소리 크기,동영상 속도를 미리 지정하는 것등등...)
event.target.playVideo();//자동재생
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
done = true;
//플레이어가 재생중일 때 작성한 동작이 실행된다.
(원하는 시간만큼만 재생되고 멈추게 하는 것도 가능하다.)
}
}3. 썸네일 적용한 내가 작성한 코드
<HTML 코드>
<div id="playerFrame">
<img id="clickPlay" src="https://img.youtube.com/vi/luQwXvSR22g/mqdefault.jpg" alt=“대체텍스트”>
<div id="player"></div>
</div>
//썸네일 해상도
120X90 (default.jpg)
https://img.youtube.com/vi/0wlXaHmmOVc/default.jpg
320X180 (mqdefault.jpg)
https://img.youtube.com/vi/0wlXaHmmOVc/mqdefault.jpg
480X360 (hqdefault.jpg)
https://img.youtube.com/vi/0wlXaHmmOVc/hqdefault.jpg
640X480 (sddefault.jpg)
https://img.youtube.com/vi/0wlXaHmmOVc/sddefault.jpg
동영상 최대 해상도 (maxresdefault.jpg)
https://img.youtube.com/vi/0wlXaHmmOVc/maxresdefault.jpg<javascript 코드>
function loadVideo() {
var player;
window.YT.ready(function () {
player = new window.YT.Player("player", {
height: $('#playerFrame').height(),
width: $('#playerFrame').width(),
videoId: "luQwXvSR22g",
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange
}
});
});
function onPlayerReady(event) {
event.target.playVideo();
$('#clickPlay').hide();
}
function onPlayerStateChange(event) {
var videoStatuses = Object.entries(window.YT.PlayerState)
console.log(videoStatuses.find(status => status[1] === event.data)[0])
}
}
function clickPlay() {
$.getScript("https://www.youtube.com/iframe_api", function () {
loadVideo();
});
}
$('#playerFrame').click(function () {
clickPlay()
})