5.1 추가 속성
HTML5의 미디어 요소, 예를 들어 <audio>와 <video>는 미디어 콘텐츠 재생을 제어하기 위한 다양한 속성을 제공합니다. 이런 속성을 이해하면 더 상호작용적이고 사용자 친화적인 웹 페이지를 만들 수 있어, 사용자의 다양한 요구에 대응할 수 있습니다. 이제 <audio>와 <video> 요소에 사용 가능한 추가 속성을 자세히 살펴보겠습니다.
속성 crossorigin
crossorigin 속성은 다른 도메인의 미디어 파일에 대한 요청을 브라우저가 어떻게 처리해야 하는지를 지정합니다. 이 속성은 두 가지 값을 가질 수 있습니다:
anonymous: 자격 증명을 포함하지 않고 요청이 수행됩니다 (쿠키, 인증 헤더 등등)use-credentials: 자격 증명을 포함하여 요청이 수행됩니다
예시:
<audio src="https://example.com/audiofile.mp3" controls crossorigin="anonymous"></audio>
<video src="https://example.com/videofile.mp4" controls crossorigin="use-credentials" width="800" height="450"></video>
<source>의 속성
<source> 태그는 <audio>와 <video> 요소 안에서 사용되어 여러 미디어 콘텐츠 소스를 지정합니다. 이는 크로스 브라우저 호환성을 보장하는 데 도움이 됩니다. 왜냐하면 서로 다른 브라우저가 서로 다른 형식을 지원할 수 있기 때문이죠.
예시:
<video controls width="600">
<source src="videofile.mp4" type="video/mp4">
<source src="videofile.webm" type="video/webm">
<source src="videofile.ogv" type="video/ogg">
Your browser does not support the video element.
</video>
자막 및 텍스트 트랙 속성과 특성
HTML5는 <track> 태그를 사용하여 자막, 텍스트 트랙 및 설명을 추가할 수 있는 기능을 제공합니다. 이 요소는 자막, 설명 및 장 등의 여러 타입의 텍스트 트랙을 지원합니다.
예시:
<video controls width="600">
<source src="videofile.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
Your browser does not support the video element.
</video>
5.2 JavaScript를 사용한 미디어 요소 제어
<audio>와 <video> 요소는 JavaScript를 사용하여 재생을 제어할 수 있는 API를 제공합니다. 이를 통해 커스텀 제어 요소를 만들고 복잡한 재생 시나리오를 구현할 수 있습니다.
예시:
<video id="myVideo" src="videofile.mp4" controls></video>
<button onclick="playVideo()">Play</button>
<button onclick="pauseVideo()">Pause</button>
<button onclick="stopVideo()">Stop</button>
const video = document.getElementById("myVideo");
function playVideo() {
video.play();
}
function pauseVideo() {
video.pause();
}
function stopVideo() {
video.pause();
video.currentTime = 0;
}
이 예시에서 버튼들은 JavaScript를 이용하여 비디오를 재생, 일시 정지 및 정지할 수 있도록 합니다.
5.3 미디어 요소의 이벤트
<audio>와 <video> 요소는 재생 상태의 변화를 추적하고 반응할 수 있는 다양한 이벤트를 지원합니다.
주요 이벤트:
play: 재생이 시작될 때 발생pause: 재생이 일시 정지될 때 발생ended: 재생이 끝날 때 발생timeupdate: 재생 시간의 변화에 따라 주기적으로 발생
이벤트 사용 예시:
<video id="myVideo" src="videofile.mp4" controls></video>
const video = document.getElementById("myVideo");
video.addEventListener('play', function() {
console.log('Video started playing');
});
video.addEventListener('pause', function() {
console.log('Video paused');
});
video.addEventListener('ended', function() {
console.log('Video ended');
});
video.addEventListener('timeupdate', function() {
console.log('Current time: ' + video.currentTime);
});
이 코드는 미디어 요소의 주요 이벤트를 어떻게 추적할 수 있는지를 보여줍니다.
GO TO FULL VERSION