✅ html
- 동영상 재생을 위한 뼈대 구현을 위한
index.html작성!!
📃 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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>Custom Video Player</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>📃 TIL
✔️ link 요소
<link>: 외부 리소스 연결 요소- 스타일 시트를 연결할 때 제일 많이 사용!
- 이번 코드에서도
FontAwesome아이콘 라이브러리의 스타일시트를 웹페이지에 추가하는 코드로 사용됨 => 해당 버전의 아이콘들을 사용할 수 있음 href: 스타일시트 파일의 경로 지정rel: 스타일시트 파일과의 관계를 나타냄integrity: 스타일시트 파일의 무결성을 검증하기 위한 해시값crossorigin: 요청에 대한 CORS 설정을 나타냄
✔️ video 요소
<video>: 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입controls: 소리 조절, 영상 탐색, 일시정지, 재시작 등이 포함한 컨트롤러를 제공src: 비디오 파일의 경로poster: 비디오가 로딩되기 전에 표시되는 이미지 지정
✔️ i 요소
- 원래
i태그는italic의 역할이었지만 HTML5에서는 이태릭체 텍스트 표시를 위한 목적 이외에도 CSS 스타일링이나 아이콘 라이브러리와 함께 아이콘을 표시하기 위해i태그가 널리 쓰이고 있음 - 하지만 웹 접근성, 시맨틱 요소 관점에서는
<span>태그를 사용하거나i태그의 역할을 더 명확하게 나타내는 방법을 고려하는 것이 좋음
✔️ input 요소
input태그를 활용하여 범위 입력 컨트롤을 생성- 범위 입력 컨트롤 : 사용자가 값을 선택하거나 조절할 수 있는 슬라이더를 나타내는 UI
step: 사용자가 슬라이더를 조작할 때 값이 변경되는 단위value: 입력의 초기값
프로젝트 매니저 이아현입니다 :)