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;
//플레이어가 재생중일 때 작성한 동작이 실행된다.
(원하는 시간만큼만 재생되고 멈추게 하는 것도 가능하다.)
}
}
# 자세한 내용은 Youtube Developers 사이트에서 확인 가능하다.
: https://developers.google.com/youtube/iframe_api_reference?hl=ko
iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API
Embed a YouTube player in your application.
developers.google.com
'Web > JavaScript+Node.js' 카테고리의 다른 글
| URL에 대한 이해 (0) | 2021.08.30 |
|---|---|
| youtube API로 웹페이지에 플레이리스트 삽입하기 (0) | 2020.08.17 |
| VanillaJS 로 크롬 앱 제작하기 (0) | 2020.08.10 |
| Vanilla JavaScript 기초 (0) | 2020.07.18 |