HTML - 비디오 플레이어: 웹 페이지에 동기를 더해줍니다

안녕하세요, 웹 개발자 꿈나이들! 오늘 우리는 HTML 비디오 플레이어의 흥미로운 세상으로 뛰어들어 보겠습니다. 웹사이트가 정적인 텍스트와 이미지만 있던 시절을 기억하시나요? 그 시절은 이미 지났습니다! 이제 우리는 동적인 비디오 콘텐츠를 직접 웹 페이지에 삽입하여 더욱 흥미롭고 상호작용적인 페이지를 만들 수 있습니다. 이 흥미진진한 여정을 시작해 보겠습니다!

HTML - Video Player

HTML 로컬 비디오 플레이어

HTML 비디오 플레이어는 무엇인가요?

코드에 들어가기 전에 HTML 비디오 플레이어가 무엇인지 이해해 보겠습니다. HTML5의 내장 기능으로, 비디오 콘텐츠를 Flash와 같은 제삼자 플러그인에 의존하지 않고 직접 웹 페이지에 삽입할 수 있게 해줍니다. 멋지죠?

기본 비디오 플레이어 구조

가장 기본적인 비디오 플레이어 구조를 시작해 보겠습니다:

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

이것을 설명해 보겠습니다:

<video> 태그는 우리 비디오 플레이어의 주요 컨테이너입니다.
width와 height 속성은 플레이어의 크기를 설정합니다.
controls 속성은 재생, 일시정지, 볼륨 컨트롤을 플레이어에 추가합니다.
<source> 태그는 재생할 비디오 파일을 지정합니다.
<video> 태그 내의 텍스트는 브라우저가 HTML5 비디오를 지원하지 않을 경우 표시됩니다.

다양한 소스 추가

하지만 기다려, 어떤 브라우저는 MP4를 지원하지 않을 수도 있잖아요? 걱정 마세요! 다양한 소스를 추가할 수 있습니다:

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

이렇게 하면 브라우저가 MP4를 지원하지 않으면 OGG 파일을 재생하려고 시도합니다.

자동 재생 및 반복

비디오가 자동으로 재생되고 지속적으로 반복되기를 원하시나요? 이렇게 하세요:

<video width="320" height="240" autoplay loop>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

autoplay 속성은 비디오가 준비되면 즉시 재생되게 하고, loop 속성은 비디오가 끝나면 다시 처음부터 재생합니다.

포스터 이미지

비디오가 재생되기 전에 이미지를 표시하고 싶다면? poster 속성을 사용하세요:

<video width="320" height="240" poster="movie_poster.jpg" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

이렇게 하면 사용자가 비디오를 시작하기 전까지 "movie_poster.jpg" 이미지가 표시됩니다.

화면 캡처

이제 화면 캡처에 대해 이야기해 보겠습니다. 이는 사용자의 화면을 캡처하고 표시하는 더 고급 기능입니다.

기본 화면 캡처

화면 캡처를 구현하는 기본 예제를 보겠습니다:

<video id="screenCapture" autoplay></video>
<button id="startCapture">화면 캡처 시작</button>

<script>
const video = document.getElementById('screenCapture');
const startButton = document.getElementById('startCapture');

startButton.addEventListener('click', async () => {
try {
const captureStream = await navigator.mediaDevices.getDisplayMedia();
video.srcObject = captureStream;
} catch (err) {
console.error("Error: " + err);
}
});
</script>

이를 설명해 보겠습니다:

우리는 캡처된 화면을 표시할 <video> 요소를 가지고 있습니다.
버튼은 화면 캡처 과정을 트리거합니다.
버튼을 클릭하면 navigator.mediaDevices.getDisplayMedia()를 사용하여 화면 캡처 권한을 요청하고 스트림을 가져옵니다.
그런 다음 이 스트림을 비디오 요소의 소스로 설정합니다.

오류 처리 및 스트림 종료

잠재적인 오류와 사용자가 화면 공유를 중지할 때 어떻게 처리할지도 고려해야 합니다:

<video id="screenCapture" autoplay></video>
<button id="startCapture">화면 캡처 시작</button>

<script>
const video = document.getElementById('screenCapture');
const startButton = document.getElementById('startCapture');

startButton.addEventListener('click', async () => {
try {
const captureStream = await navigator.mediaDevices.getDisplayMedia();
video.srcObject = captureStream;

const track = captureStream.getVideoTracks()[0];
track.onended = () => {
video.srcObject = null;
console.log('화면 공유가 종료되었습니다');
};
} catch (err) {
console.error("Error: " + err);
}
});
</script>

이 향상된 버전에서:

캡처 스트림의 비디오 트랙을 가져옵니다.
이 트랙에 onended 이벤트 리스너를 추가합니다.
화면 공유가 종료되면 비디오의 srcObject를 null로 설정하고 메시지를 로그합니다.

결론

이제 여러분은 기본 비디오 플레이어에서 고급 화면 캡처 기술까지 여정을 떠났습니다. 이 개념을 완벽하게 습득하려면 연습이 관건입니다. 웹 페이지에 비디오를 통합해 보세요, 다양한 속성을 실험해 보세요, 그리고 화면 캡처와 같은 더 복잡한 기능에 도전해 보세요.

여기 우리가 다루었던 주요 속성과 메서드를 요약한 표입니다:

속성/메서드	설명
controls	비디오 컨트롤(재생, 일시정지, 볼륨) 추가
autoplay	비디오가 준비되면 자동으로 재생
loop	비디오가 끝나면 다시 처음부터 재생
poster	비디오 재생 전에 표시할 이미지 지정
getDisplayMedia()	화면 캡처 권한 요청 및 스트림 가져오기

계속 코딩하고, 계속 배우면 곧 정보를 제공하는 것뿐만 아니라 방문자를 즐겁게 하고 상호작용을 유도하는 웹 페이지를 만들 수 있을 것입니다. 다음 시간까지, 행복한 코딩을 기원합니다!

Credits: Image by storyset