Youtube iframe api 이용하기
2022. 5. 10. 13:47ㆍJava/JSP
반응형
JSP에서 youtube 영상 틀기
Youtube api 참조 문서 : https://developers.google.com/youtube/iframe_api_reference?hl=ko
DIV 태그 사용하기
<HTML>
<!-- div 태그 사용하기 -->
<div id="player">
<!-- 플레이어를 불러올 영역 -->
<!-- div에 설정해놓은 id를 중심으로 api를 사용하게 된다. -->
</div><JS>
- 플레이어에 필요한 기능 지정하는 부분
- onYouTubeIframeAPIReady()
- api 코드가 다운로드 되는 즉시 실행되는 함수
- 전역변수 player를 정의, 함수가 플레이어 개체를 구성하게 된다.
- onReady
- 동영상이 준비되면 발생하는 함수
- onPlayerReady 함수 호출
- onStateChange
- 상태가 변함에 따라 발생하는 함수 (재생, 정지, 재생완료 등)
- onPlayerStateChange 함수 호출
<script>
// 유튜브 플레이어 api 활용 script
// 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);
// player에 영상에 대한 값과 이벤트 넣기
var player;
function onYouTubeIframeAPIReady() {
// id는 원하는대로 변경 가능 / html의 id와 일치시켜주기
player = new YT.Player('player', {
events: {
// 동영상이 준비되면 발생하는 함수
onReady: onPlayerReady,
// 상태가 변함에 따라 발생하는 함수 (재생, 정지 등)
onStateChange: onPlayerStateChange,
},
});
}
// 동영상이 준비되면 발생하는 함수
function onPlayerReady(event) {
<%--
동영상 자동재생 및 음소거
autoplay를 설정했을 경우 입력할 필요 없음.
event.target.playVideo();
--%>
}
// 플레이어의 상태에 따른 이벤트
function onPlayerStateChange() {
// -1. 시작되지 않음 / 0. 종료 / 1. 재생 중 / 2. 일시중지 / 3. 버퍼링 / 5. 동영상 신호
if (player.getPlayerState() == 1) console.log('재생 중');
else if (player.getPlayerState() == 2) console.log('일시중지');
}
</script>
전체 코드 및 실행 영상 확인하기
더보기
Document
전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="player"></div>
<script>
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, ytplayer;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange,
},
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
실제로 수행했을 때
영상 썸네일 추출하기
<!-- url에서 '?v=' 뒤에 나오는 코드 추출 videoId로 사용됨 -->
<c:set var="urlCode" value="${fn:split(result.urlAddr, '?v=')[1]}" />
<!-- urlCode를 활용하여 영상 썸네일 추출 -->
<img src="https://img.youtube.com/vi/${urlCode}/sddefault.jpg" />
728x90
반응형
'Java > JSP' 카테고리의 다른 글
| JSP에서 동일한 칼럼에 여러 데이터 넣기 - list 형태 사용하기 (0) | 2022.06.13 |
|---|