1)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vimeo Controller</title>
<link rel="stylesheet" href="styles.css">
<script src="https://player.vimeo.com/api/player.js"></script>
</head>
<body>
<div class="video-container">
<div class="hell" oncontextmenu="return false;"></div>
<iframe id="vimeo-player" src="https://player.vimeo.com/video/1023813913?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&app_id=58479" width="640" height="360" frameborder="0" allowfullscreen></iframe>
</div>
<div class="controls">
<button id="play-btn">재생</button>
<button id="pause-btn">일시 정지</button>
<button id="stop-btn">정지</button>
<button id="pip-btn">화면 속 화면</button>
<button id="fullscreen-btn">전체 화면</button>
</div>
<script src="script.js"></script>
</body>
</html>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
}
.video-container {
margin-bottom: 20px;
}
.controls {
display: flex;
gap: 10px;
}
</style>
<script>
const iframe = document.getElementById('vimeo-player');
const player = new Vimeo.Player(iframe);
// 비디오 재생
function playVideo() {
player.play().then(() => {
console.log('재생 중...');
}).catch(error => {
console.error('재생 중 오류 발생:', error);
});
}
// 비디오 일시 정지
function pauseVideo() {
player.pause().then(() => {
console.log('일시 정지됨.');
}).catch(error => {
console.error('일시 정지 중 오류 발생:', error);
});
}
// 비디오 정지 (일시 정지 후 재생 위치를 0으로 설정)
function stopVideo() {
player.pause().then(() => {
return player.setCurrentTime(0);
}).then(() => {
console.log('비디오 정지됨.');
}).catch(error => {
console.error('정지 중 오류 발생:', error);
});
}
// 화면 속 화면 모드
async function togglePip() {
if (document.pictureInPictureElement) {
await document.exitPictureInPicture();
console.log('화면 속 화면 종료됨.');
} else {
try {
await player.requestPictureInPicture();
console.log('화면 속 화면 활성화됨.');
} catch (error) {
console.error('화면 속 화면 요청 오류 발생:', error);
}
}
}
// 전체 화면 모드
async function toggleFullscreen() {
try {
if (document.fullscreenElement) {
await document.exitFullscreen();
console.log('전체 화면 종료됨.');
} else {
await iframe.requestFullscreen();
console.log('전체 화면 활성화됨.');
}
} catch (error) {
console.error('전체 화면 오류 발생:', error);
}
}
// 버튼 이벤트 리스너
document.getElementById('play-btn').addEventListener('click', playVideo);
document.getElementById('pause-btn').addEventListener('click', pauseVideo);
document.getElementById('stop-btn').addEventListener('click', stopVideo);
document.getElementById('pip-btn').addEventListener('click', togglePip);
document.getElementById('fullscreen-btn').addEventListener('click', toggleFullscreen);
// 페이지가 로드되면 비디오를 자동으로 재생
window.onload = () => {
playVideo(); // 자동 재생
// 10초 후 일시 정지
setTimeout(pauseVideo, 10000); // 10초 후 일시 정지
// 15초 후 재생
setTimeout(playVideo, 15000); // 15초 후 다시 재생
// 20초 후 정지
setTimeout(stopVideo, 20000); // 20초 후 정지
};
</script>
<style>
/* Parent Wrapper Element */
figure {
position: relative;
width: 320px; /* 비디오의 너비 */
height: 180px; /* 비디오의 높이 */
margin: 0 auto; /* 중앙 정렬 */
}
/* Sibling Overlay Element */
.hell {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2; /* figcaption의 z-index 설정 */
pointer-events: none; /* 클릭 이벤트 비활성화 */
}
/* 비디오 iframe 스타일 */
vimeo-player {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: none; /* 테두리 없애기 */
z-index: 1; /* iframe의 z-index 설정 */
}
/* 컨트롤 버튼 스타일 */
.controls {
display: flex;
justify-content: center; /* 버튼 중앙 정렬 */
gap: 10px; /* 버튼 사이의 간격 */
margin-top: 10px; /* 상단 여백 */
}
.control-btn {
padding: 5px 10px;
background: rgba(255, 255, 255, 0.8); /* 버튼 배경색 */
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
HTML
복사
