<!DOCTYPE html>
<html>
<body>
<!-- 1. 영상이 노출될 영역을 확보한다.
api가 제대로 작동하면 <div>에 자동으로 <iframe> 태그가 load될 것 이다. -->
<div id="player"></div>
<script>
// 2. 이 코드는 Iframe Player 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);
// 3. API 코드를 다운로드 받은 다음에 <iframe>을 생성하는 기능 (youtube player도 더불어)
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360', //변경가능-영상 높이
width: '640', //변경가능-영상 너비
videoId: 'M7lc1UVf-VE', //변경-영상ID
playerVars: {
'rel': 0, //연관동영상 표시여부(0:표시안함)
'controls': 0, //플레이어 컨트롤러 표시여부(0:표시안함)
'autoplay' : 1, //자동재생 여부(1:자동재생 함, mute와 함께 설정)
'mute' : 1, //음소거여부(1:음소거 함)
'loop' : 1, //반복재생여부(1:반복재생 함)
'playsinline' : 1 //iOS환경에서 전체화면으로 재생하지 않게
'playlist' : 'M7lc1UVf-VE' //재생할 영상 리스트
},
events: {
'onReady': onPlayerReady, //onReady 상태일 때 작동하는 function이름
'onStateChange': onPlayerStateChange //onStateChange 상태일 때 작동하는 function이름
}
});
}
// 4. API는 비디오 플레이어가 준비되면 아래의 function을 불러올 것이다.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. API는 플레이어의 상태가 변화될 때 아래의 function을 불러올 것이다.
// 이 function은 비디오가 재생되고 있을 때를 가르킨다.(state=1),
// 플레이어는 6초 이상 재생되고 정지되어야 한다.
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>출처: https://nanaj.tistory.com/12 [주니어 프론트엔드의 기록:티스토리]
'코딩 > else' 카테고리의 다른 글
| bongo cat buddy VS code 말고 windows에서도 구동하기. (3) | 2024.08.27 |
|---|---|
| 무료 웹호스팅 서비스 (0) | 2024.08.15 |
| 올라마 ollama 웹에서 무료로 구동하기 (0) | 2024.07.30 |
| AWS Lightsail에서 Ubuntu LAMP + Python Flask 구축 방법 (0) | 2024.07.30 |
