[JS] Day11 - Custom Video Player

demo:

https://danji-ya.github.io/JS_javascript30/11-CustomVideoPlayer/

Day11 - Custom Video Player

🎯 기능 요구사항

• 기본 비디오 controls가 아닌 커스텀화 하여 비디오 플레이어를 구현한다.

🚀 배운 점

비디오 전체화면 및 축소

.player {
    max-width: 1000px;
    position: relative;
    overflow: hidden;
}

.player:fullscreen {
    max-width: none;
    width: 100%;
}

.viewer {
    width: 100%;
}

<div class="player">
        <video class="viewer" src="./652333414.mp4"></video>
        <div class="player-controls">
	...
        </div>
</div>

function toggleFullScreen() {
        if (document.fullscreenElement) {
            document.exitFullscreen();
        } else {
            player.requestFullscreen();
        }
 }

requestFullscreen() 호출 시, 해당 요소가 전체화면을 채울 수 있으며
.player에 max-width가 걸려있어 전체화면이 될 때, max-width 제한을 해제해줘야 video가 100%로 전체화면이 가능해진다.
반대로, 축소시킬 때는 player기준이 아니라 document로 기준을 삼아야 다시 돌아 올 수 있었다.

document.fullscreenElement:는 전체 화면 모드인 요소가 있으면 true를 반환한다.

비디오 현재시간에 맞는 progress css

<div class="progress">
	<div class="progress-filled"></div>
</div>

.progress {
    display: flex;
    height: 5px;
    /* flex 아이템의 기본 크기 설정 */
    flex-basis: 100%; 
    background: #676767;
    position: relative;
    cursor: pointer;
}

.progress-filled {
    background: red;
    flex-basis: 0%;
}

function updateProgressBar() {
	progressBar.style.flexBasis =
      			`${(video.currentTime/video.duration) * 100}%`;
}


video.addEventListener('timeupdate', updateProgressBar);

Flex Item의 기본 너비를 설정하는 flex-basis를 이용하여 progressBar를 조절할 수 있었다.
이 때, video.currentTime의 조정은 클릭 시 이벤트를 호출한 요소를 기준의 좌표인 offsetX를 이용하여 요소의 전체 길이 대비 해당 offesetX를 이용하여 현재시간을 알 수 있었다.

const currentTime = (e.offsetX / progress.offsetWidth) * video.duration;