유데미에서 Brad Traversy의 20 Web Projects With Vanilla JavaScript
를 하나씩 직접 코딩해보면서 정리하기 위한 글이다.
데모 페이지
Custom Video Player (vanillawebprojects.com)
코드 링크
github.com/rshak8912/20-Web-Projects
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Video Player</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous"/>
<link rel="stylesheet" href="css/progress.css"/>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<h1>커스텀 비디오 플레이어</h1>
<video src="videos/gone.mp4" id="video" class="screen" poster="img/poster.png"></video>
<div class="controls">
<button class="btn" id="play">
<i class="fa fa-play fa-2x"></i>
</button>
<button class="btn" id="stop">
<i class="fa fa-stop fa-2x"></i>
</button>
<input type="range" id="progress" class="progress" min="0" max="100" step="0.1"
value="0">
<span class="timestamp" id="timestamp">00:00</span>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
@import url('https://fonts.googleapis.com/css?family=Questrial&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: 'Questrial', 'sans-serif';
background-color: #666;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-height: 100vh;
margin: 0;
}
h1 {
color: #ffffff;
}
.screen {
cursor: pointer;
width: 50%;
background-color: #000000 !important;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.controls {
background-color: #333;
color: #fff;
width: 60%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.controls .btn {
border: 0;
background: transparent;
cursor: pointer;
}
.controls .fa-play {
color: #28a745;
}
.controls .fa-stop {
color: #dc3545;
}
.controls .fa-pause {
color: #fff;
}
.controls .timestamp {
color: #fff;
font-weight: bold;
margin-left: 10px;
}
.btn:focus {
outline: 0;
}
@media (max-width: 800px) {
.screen,
.controls {
width: 90%;
}
}
script.js
const video = document.getElementById('video');
const play = document.getElementById('play');
const stop = document.getElementById('stop');
const progress = document.getElementById('progress');
const timestamp = document.getElementById('timestamp');
function toggleVideoStatus() {
if (video.paused) {
video.play();
} else {
video.pause();
}
}
const updatePlayIcon = () => {
if (video.paused) {
play.innerHTML = '<i class="fa fa-play fa-2x"></i>';
} else {
play.innerHTML = '<i class="fa fa-pause fa-2x"></i>';
}
}
function updateProgress() {
progress.value = (video.currentTime / video.duration) * 100;
// Get minutes
let mins = Math.floor(video.currentTime / 60);
if (mins < 10) {
mins = '0' + String(mins);
}
// Get seconds
let secs = Math.floor(video.currentTime % 60);
if (secs < 10) {
secs = '0' + String(secs);
}
timestamp.innerHTML = `${mins}:${secs}`;
}
function setVideoProgress() {
video.currentTime = (+progress.value * video.duration) / 100;
}
const stopVideo = () => {
video.currentTime = 0;
video.pause();
}
video.addEventListener('click', toggleVideoStatus);
video.addEventListener('pause', updatePlayIcon);
video.addEventListener('play', updatePlayIcon);
video.addEventListener('timeupdate', updateProgress);
play.addEventListener('click', toggleVideoStatus);
stop.addEventListener('click',stopVideo);
progress.addEventListener('change', setVideoProgress);
강의를 통해 배운점(생각, 내용 정리)
- video 관련 api를 사용해 봄
- 버튼이 포커스 잡혔을 때 테두리 없애는 방법: fucus {outline = 0;}
'HTML&CSS&Javascript' 카테고리의 다른 글
| [Udemy]20 Web Projects With Vanilla JavaScript -Project#5 (0) | 2020.12.10 |
|---|---|
| [Udemy]20 Web Projects With Vanilla JavaScript -Project#4 (0) | 2020.12.09 |
| [Udemy]20 Web Projects With Vanilla JavaScript -Project#2 (0) | 2020.12.08 |
| [Udemy]20 Web Projects With Vanilla JavaScript -Project#1 (0) | 2020.12.07 |
| Hoisting(호이스팅) (0) | 2020.12.02 |