영상 프로그레스바 (1)

Vimeo 시간 및 프로그레스 바 표시

0:00 / 0:00

<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 설정 */
  }
  
    #control {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 10px;
            font-size: 16px;
            text-align: center;
        }

        #time-display {
            font-size: 16px;
        }

        #progress-bar {
            position: relative;
            width: 300px;
            height: 10px;
            background-color: #ddd;
            border-radius: 5px;
            overflow: hidden;
        }

        #progress {
            width: 0%;
            height: 100%;
            background-color: #4CAF50;
            transition: width 0.1s;
        }
  
</style>
<!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&byline=false&portrait=false&title=false&speed=true&transparent=0&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 id="control">
            <div id="time-display">
                <span id="current-time">0:00</span> / <span id="total-time">0:00</span>
            </div>
            <div id="progress-bar">
                <div id="progress"></div>
            </div>
        </div>
    </div>

    <script>
        const iframe = document.getElementById('vimeo-player');
        const player = new Vimeo.Player(iframe);

        // 비디오 제어 버튼 설정
        document.getElementById('play-btn').addEventListener('click', () => player.play());
        document.getElementById('pause-btn').addEventListener('click', () => player.pause());
        document.getElementById('stop-btn').addEventListener('click', () => {
            player.pause().then(() => player.setCurrentTime(0));
        });
        document.getElementById('pip-btn').addEventListener('click', async () => {
            if (document.pictureInPictureElement) await document.exitPictureInPicture();
            else await player.requestPictureInPicture();
        });
        document.getElementById('fullscreen-btn').addEventListener('click', async () => {
            if (document.fullscreenElement) await document.exitFullscreen();
            else await iframe.requestFullscreen();
        });

        // 비디오 총 시간 및 프로그레스 바 업데이트
        player.getDuration().then(duration => {
            document.getElementById('total-time').textContent = formatTime(duration);
        }).catch(error => console.error('전체 시간 가져오기 오류:', error));

        player.on('timeupdate', data => {
            const currentTime = data.seconds;
            const duration = data.duration;
            const progressPercent = (currentTime / duration) * 100;

            document.getElementById('current-time').textContent = formatTime(currentTime);
            document.getElementById('progress').style.width = `${progressPercent}%`;
        });

        // 클릭 위치로 이동 설정
        document.getElementById('progress-bar').addEventListener('click', async (event) => {
            const progressBar = event.currentTarget;
            const clickPosition = event.offsetX;
            const barWidth = progressBar.offsetWidth;

            // 클릭 위치의 비율을 계산
            const clickPercent = clickPosition / barWidth;

            // 전체 시간 가져와서 해당 위치로 이동
            const duration = await player.getDuration();
            const newTime = duration * clickPercent;

            player.setCurrentTime(newTime).catch(error => console.error('시간 설정 오류:', error));
        });

        // 시간 포맷팅 함수
        function formatTime(seconds) {
            const minutes = Math.floor(seconds / 60);
            const secs = Math.floor(seconds % 60).toString().padStart(2, '0');
            return `${minutes}:${secs}`;
        }
    </script>
</body>
</html>

HTML
복사

<style>
body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.video-container {
    margin-bottom: 20px;
}

  .controls_layout{
  display: flex;
	flex-direction: column;
  }
  
.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 설정 */
  }
  
    #control {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 10px;
            font-size: 16px;
            text-align: center;
        }

        #time-display {
            font-size: 16px;
        }

        #progress-bar {
            position: relative;
            width: 300px;
            height: 10px;
            background-color: #ddd;
            border-radius: 5px;
            overflow: hidden;
        }

        #progress {
            width: 0%;
            height: 100%;
            background-color: #4CAF50;
            transition: width 0.1s;
        }
  
</style>
<!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&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

        </div>
    </div>

  <div class="controls_layout">
    <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>
	  
        <div id="control">
            <div id="time-display">
                <span id="current-time">0:00</span> / <span id="total-time">0:00</span>
            </div>
            <div id="progress-bar">
                <div id="progress"></div>
        </div>        </div>
		  
		  
		  
    </div>

    <script>
        const iframe = document.getElementById('vimeo-player');
        const player = new Vimeo.Player(iframe);

        // 비디오 제어 버튼 설정
document.getElementById('play-btn').addEventListener('click', () => {
    player.play().catch(error => console.error('재생 오류:', error));
});

        document.getElementById('pause-btn').addEventListener('click', () => player.pause());
        document.getElementById('stop-btn').addEventListener('click', () => {
            player.pause().then(() => player.setCurrentTime(0));
        });
        document.getElementById('pip-btn').addEventListener('click', async () => {
            if (document.pictureInPictureElement) await document.exitPictureInPicture();
            else await player.requestPictureInPicture();
        });
        document.getElementById('fullscreen-btn').addEventListener('click', async () => {
            if (document.fullscreenElement) await document.exitFullscreen();
            else await iframe.requestFullscreen();
        });

        // 비디오 총 시간 및 프로그레스 바 업데이트
        player.getDuration().then(duration => {
            document.getElementById('total-time').textContent = formatTime(duration);
        }).catch(error => console.error('전체 시간 가져오기 오류:', error));

        player.on('timeupdate', data => {
            const currentTime = data.seconds;
            const duration = data.duration;
            const progressPercent = (currentTime / duration) * 100;

            document.getElementById('current-time').textContent = formatTime(currentTime);
            document.getElementById('progress').style.width = `${progressPercent}%`;
        });

        // 클릭 위치로 이동 설정
        document.getElementById('progress-bar').addEventListener('click', async (event) => {
            const progressBar = event.currentTarget;
            const clickPosition = event.offsetX;
            const barWidth = progressBar.offsetWidth;

            // 클릭 위치의 비율을 계산
            const clickPercent = clickPosition / barWidth;

            // 전체 시간 가져와서 해당 위치로 이동
            const duration = await player.getDuration();
            const newTime = duration * clickPercent;

            player.setCurrentTime(newTime).catch(error => console.error('시간 설정 오류:', error));
        });

        // 시간 포맷팅 함수
        function formatTime(seconds) {
            const minutes = Math.floor(seconds / 60);
            const secs = Math.floor(seconds % 60).toString().padStart(2, '0');
            return `${minutes}:${secs}`;
        }
    </script>
</body>
</html>

HTML
복사

#play-btn {
background-image: url('https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F2fb4134f-52c7-46ba-88d5-e94a975e1cb9%2Ficonoir_play-solid.png&blockId=12e3358f-d4bf-801c-aa44-f5b326c4b419');
background-size: cover; /* 배경 이미지가 버튼 크기에 맞게 커버됩니다. /
background-position: center; / 배경 이미지의 위치를 중앙으로 설정합니다. /
/ 추가적인 스타일이 필요하다면 여기에 추가하세요. */
background-color: black;
width: 24px;
height: 24px;
}
#pause-btn{

    background-image: url('<https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2Ff9babd1b-f4ce-492e-aea0-25e78b8ca609%2Flets-icons_stop-fill.png&blockId=12e3358f-d4bf-802a-a939-c479daef9e85>');
background-size: cover; /* 배경 이미지가 버튼 크기에 맞게 커버됩니다. */
background-position: center; /* 배경 이미지의 위치를 중앙으로 설정합니다. */
/* 추가적인 스타일이 필요하다면 여기에 추가하세요. */
background-color: black;
  	width: 24px;
  height: 24px;
}

#stop-btn{
    background-image: url('<https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F6b28a931-0d2e-4b6b-9960-f21ee35503b3%2Fion_stop.png&blockId=12f3358f-d4bf-8068-8194-c72076475304>');
background-size: cover; /* 배경 이미지가 버튼 크기에 맞게 커버됩니다. */
background-position: center; /* 배경 이미지의 위치를 중앙으로 설정합니다. */
/* 추가적인 스타일이 필요하다면 여기에 추가하세요. */
background-color: black;
  	width: 24px;
  height: 24px;
}

#pip-btn{
    background-image: url('<https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F29db97e2-be15-4ef8-8a5c-d16d7aca3c15%2FFrame_48097712.png&blockId=12f3358f-d4bf-8064-94ec-f5fcccbb96e4>');
background-size: cover; /* 배경 이미지가 버튼 크기에 맞게 커버됩니다. */
background-position: center; /* 배경 이미지의 위치를 중앙으로 설정합니다. */
/* 추가적인 스타일이 필요하다면 여기에 추가하세요. */
background-color: black;
  	width: 24px;
  height: 24px;
}
Plain Text
복사