오른쪽 우클릭 차단 + 컨트롤러 (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 oncontextmenu="return false;">
  
  <div class="layout_vimeo">
	<div class="overlay"></div>
    <div class="video-container">
        <iframe id="vimeo-player" src="https://player.vimeo.com/video/1023813913?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media" width="640" height="360" frameborder="0" allowfullscreen></iframe>
    </div>    </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;
}

  .layout_vimeo{
              position: relative;
            width: 320px; /* 비디오의 너비 */
            height: 180px; /* 비디오의 높이 */
            margin: 0 auto; /* 중앙 정렬 */
  }
  
  .overlay{
              position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 2; /* figcaption의 z-index 설정 */
  }
  
  iframe{
              position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            border: none; /* 테두리 없애기 */
            z-index: 1; /* iframe의 z-index 설정 */
  }
  
</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>
HTML
복사