[HTML/CSS] Video Controls 커스텀하기 - 1

 

HTML & CSS 완성본

 

<video> 태그에서 제공하는 기본 컨트롤 디자인 대신, 다른 디자인을 적용하고 싶었습니다.

하지만 HTML5 에서는 이러한 커스텀 디자인을 기본적으로 지원하지 않기 때문에, 기본 컨트롤을 숨기고 HTML과 CSS를 사용하여 직접 컨트롤을 만들기로 했습니다.

이후, 각 버튼의 기능은 JavaScript로 구현할 계획입니다.

이번 포스팅에서는 HTML과 CSS를 사용하여 비디오 플레이어의 컨트롤을 커스텀 하는 방법을 다루고 프로그레스 바 표시 방법과 input range의 커스터마이징 등 중점적인 부분만 작성할 예정입니다.

다음 포스팅에서는 JavaScript를 활용하여 각 버튼의 기능을 구현할 예정입니다.

 

https://hy-un.tistory.com/entry/JSJavaScript-Video-Controls-%EC%BB%A4%EC%8A%A4%ED%85%80%ED%95%98%EA%B8%B0-2

[JS/JavaScript] Video Controls 커스텀하기 - 2

완성 페이지는 아래 링크에서 확인 해 주세요.

https://ganghyun95.github.io/video-controls-custom/

Video Player Custom

구현 계획

이번 포스팅에서는 HTML과 CSS로 비디오 플레이어의 커스텀 컨트롤을 설계하고, 다음 포스팅에서 JavaScript로 기능을 구현할 예정입니다.

구현할 기능은 비디오 재생 위치를 표시할 프로그래스 바, 재생/정지, 배속 조절, 볼륨 조절 및 음소거, 비디오의 현재 재생시간 표시, 전체화면, PIP 모드 기능입니다.

아이콘은 fontawesome을 사용합니다.

 

playsinline

<video class="video-player" poster="/image/poster.png" src=http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4 pteload="auto" playsinline tabindex="0"></video>

playsinline 속성을 추가하는 이유는 iOS 환경에서 기본적으로 비디오가 전체 화면으로 재생되는 것을 방지하고, 인라인으로 재생되도록 하기 위함입니다. 이 속성을 사용하면 iOS에서 비디오가 전체 화면으로 자동 재생되는 것을 막을 수 있어, 커스텀 컨트롤을 적용하고 controls 바를 숨긴 상태로 재생할 수 있습니다.

 

프로그래스바

프로그래스바는 JavaScript를 사용하여 비디오 재생 시간에 따라 width를 변경시켜서 동적으로 변경 되도록 구현할 예정입니다.

현재 스타일의 'width = 50%' 는 임시로 설정한 것입니다.

1. 'pregress-section': 프로그래스 바가 위치할 섹션

2. 'progress-bar-wrap': 프로그래스 바의 배경 영역

3. 'progress-bar': 진행 상태를 표시하는 바

 

'progress-section' 에 위 아래 padding을 추가한 이유는 모바일 환경에서 사용자가 프로그래스바를 보다 쉽게 터치할 수 있도록 하기 위함입니다.

이렇게 하면 터치 영역이 넓어져 조작이 편리해집니다.

<div class="progress-section">
	<div class="progress-bar-wrap">
		<div class="progress-bar" style="width: 50%;"></div>
	</div>
</div>

.progress-section {
	padding: 0.5rem 0;
}

.progress-bar-wrap {
    position: relative;
    background: #848484;
    height: 5px;
	border-radius: 0.625rem;
	overflow: hidden;
    cursor: pointer;
}

.progress-bar {
    position: absolute;
	top: 0;
	left: 0;
    background: #ff0606;
    height: 100%;
    width: 50%;
	border-radius: inherit;
}

 

input range 커스텀

'-webkit-appearance: none;' / 'appearance: none;' : input range의 기본 스타일을 제거

'-webkit-slider-runnable-track' : 슬라이더 전체 트랙 스타일링

'-webkit-slider-thumb': Webkit 기반 브라우저에서 슬라이더 핸들을 스타일링할 때 사용

'-moz-range-thumb': Firefox 브라우저에서 슬라이더 핸들을 스타일링할 때 사용

 

현재 스타일의 "background: linear-gradient(to right, #fff 50%, #555 50%)" 는 임시로 설정한 것입니다.

JavaScript를 사용하여 range 요소에 input 이벤트가 발생할 때마다 배경의 linear-gradient를 변경하여 슬라이더가 동적으로 업데이트되도록 구현할 예정입니다.

<input type="range" class="volume-control" min="0" max="1" step="0.01" value="0.5" style="background: linear-gradient(to right, #fff 50%, #555 50%)">

.volume-control {
    width: 48px;
	height: 5px;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    background: #fff;
	border-radius: 3px;
	cursor: pointer;
	margin-right: 1rem;
}

.volume-control::-webkit-slider-runnable-track {
    height: 5px;
}

.volume-control::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.volume-control::-moz-range-thumb {
    -moz-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    top: 50%;
    border: none;
}

 

아이콘 변경

플레이 버튼, 일시 정지 버튼, 그리고 전체 화면 버튼의 아이콘은 상태에 따라 변경되어야 합니다. 이를 위해 각 버튼의 클래스에 따라 Font Awesome의 content 속성을 사용하여 아이콘을 동적으로 변경할 예정입니다.

.control-btn::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 24px;
    color: currentColor;
    display: inline-block;
}

.play-pause-btn:not(.pause)::before {
    content: "\f04b";
}

.play-pause-btn.pause::before {
    content: "\f04c";
}

.fs-btn:not(.full-screen)::before {
    content: "\f065";
}

.fs-btn.full-screen::before {
    content: "\f066";
}