HTML 미디어 플레이어 만들기
Source: Dev.to
HTML 비디오 플레이어 만들기
지난 며칠 동안 freeCodeCamp를 통해 또 다른 워크숍과 실습을 완료했습니다. HTML 비디오 플레이어 만들기 워크숍을 수강한 뒤, 어제는 HTML 오디오 및 비디오 플레이어 만들기 실습에 도전했습니다.
이 워크숍은 13단계에 걸쳐 HTML 비디오 플레이어를 만드는 과제입니다. 먼저 기본 HTML 보일러플레이트가 제공되고, 각 단계마다 추가 지시사항이 주어져 연습을 진행합니다.
이전 단계에서 제공된 단일 이론 수업은 이번 수업과 다음 수업을 완수하는 데 도움이 되도록 설계되었습니다.
7단계에서는 poster 요소가 소개되었습니다 – 이 요소를 사용하면 재생하기 전 비디오에 썸네일을 표시할 수 있습니다. 저는 이 요소에 대해 사전 지식이 없었기 때문에 유용한 새로운 정보를 얻었습니다.
이후 단계에서는 source와 type 요소에 초점을 맞췄습니다. 특히 type을 사용해 브라우저가 사용되는 포맷을 알 수 있게 하는 것이 이해하기 쉬웠습니다.
워크숍을 마칠 때쯤, 모든 개념에 만족했고 실습인 HTML 오디오 및 비디오 플레이어 만들기에 도전할 준비가 되었습니다.
HTML 오디오 및 비디오 플레이어 만들기
이 실습은 이전 워크숍에 오디오 플레이어를 추가하여 진행되었습니다 – 말장난은 아닙니다! 예시를 그대로 복사하고 싶지 않아 저는 로파이(Lofi) 비디오와 오디오 파일을 사용했습니다. 가장 어려운 부분은 연결할 소스를 찾는 것이었지만, 이를 해결하고 나니 사용자 스토리를 완성하는 과정은 비교적 순조로웠습니다. 결과는 다음과 같습니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Audio and Video Lab</title>
</head>
<body>
<section id="study-with-lofi">
<h2>Study with Lofi</h2>
<section id="study-session">
<h3>Study Session</h3>
<!-- Video and audio elements would go here -->
</section>
<section id="background-lofi-music">
<h3>Background Lofi Music</h3>
<!-- Additional content -->
</section>
</section>
</body>
</html>Responsive Web Design 인증 과정의 실습들을 저는 복사해 두고 GitHub에 업로드하고 있습니다. 이렇게 하면 나중에 다시 살펴볼 수 있습니다.
워크숍과 실습을 모두 마친 뒤, 이미지와 SVG 작업에 관한 세 개의 이론 수업을 연속으로 들을 시간이 있었습니다. 특히 SVG 파일에 대해 많이 배웠는데, 다음 워크숍에서 하트 아이콘을 만들 때 큰 도움이 되었습니다. 다음에 더 자세히 다루겠습니다. 읽어 주셔서 감사합니다!