코딩스쿨

▶ HTML Media

HTML Media

HTML에서 미디어(Media) 요소는 웹 페이지에 오디오와 비디오 파일을 삽입하고 제어하는 기능을 제공합니다. 이를 통해 사용자는 웹사이트 내에서 멀티미디어 콘텐츠를 직접 재생할 수 있습니다. HTML5는 이러한 미디어를 지원하기 위해 <audio>와 <video> 태그를 도입했습니다.

1. HTML `<audio>` 요소

<audio> 요소는 웹 페이지에서 오디오 파일을 재생할 때 사용됩니다.

기본 구조:

 <audio controls>
 <source src="audiofile.mp3" type="audio/mp3">
 <source src="audiofile.ogg" type="audio/ogg">
 브라우저가 오디오 요소를 지원하지 않습니다.
 </audio>

controls : 재생, 일시정지, 볼륨 등을 제어할 수 있는 기본 컨트롤을 표시합니다.
<source> : 지원되는 오디오 파일 형식을 지정합니다. 여러 형식을 제공해 브라우저 호환성을 높일 수 있습니다.
파일 형식: 일반적으로 MP3, OGG, WAV 파일 형식이 사용됩니다.

예시:

 <!DOCTYPE html>
 <html lang="ko">
 <head>
    <meta charset="UTF-8">
    <title>HTML Audio 예시</title>
 </head>
 <body>
    <h1>오디오 재생 예시</h1>
    <audio controls>
        <source src="audiofile.mp3" type="audio/mp3">
        <source src="audiofile.ogg" type="audio/ogg">
        오디오를 재생할 수 없습니다.
    </audio>
 </body>
 </html>

2. HTML `<video>` 요소

<video> 요소는 웹 페이지에서 비디오 파일을 재생할 때 사용됩니다.

기본 구조:

<video controls width="600" height="400">
  <source src="videofile.mp4" type="video/mp4">
  <source src="videofile.ogg" type="video/ogg">
  브라우저가 비디오 요소를 지원하지 않습니다.
</video>

controls : 사용자가 재생, 일시정지, 볼륨 조절 등을 할 수 있는 기본 컨트롤을 제공합니다.
**width**와 height : 비디오의 크기를 지정합니다.
<source> : 지원되는 비디오 파일 형식을 지정합니다. 여러 형식을 제공해 호환성을 보장할 수 있습니다.
파일 형식: 일반적으로 MP4, WebM, OGG 파일 형식이 사용됩니다.

예시:

 <!DOCTYPE html>
 <html lang="ko">
 <head>
    <meta charset="UTF-8">
    <title>HTML Video 예시</title>
 </head>
 <body>
    <h1>비디오 재생 예시</h1>
    <video controls width="600" height="400">
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        비디오를 재생할 수 없습니다.
    </video>
 </body>
 </html>

3. 비디오 및 오디오 속성

공통 속성:

controls : 재생, 일시정지, 볼륨 등의 컨트롤을 화면에 표시합니다.
autoplay : 페이지가 로드되면 자동으로 재생을 시작합니다. (주의: 일부 브라우저는 무음 오디오만 자동 재생을 허용합니다.)
```
<audio src="audiofile.mp3" autoplay></audio>
```
loop : 미디어가 끝날 때 자동으로 다시 시작됩니다.
```
<video src="videofile.mp4" loop></video>
```
muted : 미디어를 무음으로 재생합니다.
```
<audio src="audiofile.mp3" muted></audio>
```
preload : 미디어를 어떻게 미리 로드할지 설정합니다. 옵션은 none, metadata, auto입니다.
```
<audio src="audiofile.mp3" preload="auto"></audio>
```

4. 자막 및 텍스트 트랙

비디오에 자막을 추가하기 위해 <track> 요소를 사용할 수 있습니다. 이는 여러 언어로 자막을 제공하거나, 청각 장애인을 위한 텍스트 설명을 추가할 때 유용합니다.

예시:

<video controls>
    <source src="videofile.mp4" type="video/mp4">
    <track src="subtitles_ko.vtt" kind="subtitles" srclang="ko" label="Korean">
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
    비디오를 재생할 수 없습니다.
</video>

<track> 속성:
- src : 자막 파일 경로 (보통 .vtt 형식).
- kind : 자막 유형 (subtitles, captions, descriptions 등).
- srclang : 자막의 언어 코드 (예: ko는 한국어, en은 영어).
- label : 자막 트랙의 이름.

5. 자바스크립트를 통한 미디어 제어

HTML 오디오 및 비디오 요소는 자바스크립트로 제어할 수 있습니다. 자바스크립트를 사용하여 미디어를 재생하거나 일시정지, 볼륨 조절 등의 동작을 제어할 수 있습니다.

자바스크립트로 미디어 제어 예시:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>자바스크립트로 미디어 제어</title>
</head>
<body>
    <h1>자바스크립트로 오디오 제어</h1>
    <audio id="myAudio" controls>
        <source src="audiofile.mp3" type="audio/mp3">
        오디오를 재생할 수 없습니다.
    </audio>
    <br>
    <button onclick="playAudio()">재생</button>
    <button onclick="pauseAudio()">일시정지</button>
    <button onclick="stopAudio()">정지</button>
    <script>
        var audio = document.getElementById("myAudio");
        function playAudio() {
            audio.play();
        }
        function pauseAudio() {
            audio.pause();
        }
        function stopAudio() {
            audio.pause();
            audio.currentTime = 0;  // 처음으로 되감기
        }
    </script>
</body>
</html>

자바스크립트 속성 및 메서드:

play() : 미디어를 재생합니다.
pause() : 미디어를 일시정지합니다.
currentTime : 미디어의 현재 재생 시간을 초 단위로 가져오거나 설정합니다.

audio.currentTime = 0;  // 처음으로 되감기

volume : 미디어의 볼륨을 제어합니다 (값의 범위는 0.0에서 1.0)

audio.volume = 0.5;  // 볼륨을 50%로 설정

6. 미디어 이벤트

미디어 요소는 여러 이벤트를 지원하며, 이를 통해 미디어 재생 중 발생하는 다양한 상황에 대응할 수 있습니다.

주요 이벤트:

play : 재생이 시작될 때 발생.

video.addEventListener('play', function() {
    console.log('비디오 재생 시작');
});

pause : 재생이 일시 중지될 때 발생.
ended : 미디어가 끝까지 재생되었을 때 발생.
timeupdate : 재생 시간이 변경될 때마다 발생.

예시:

var video = document.getElementById('myVideo');
video.addEventListener('ended', function() {
    alert('비디오가 종료되었습니다.');
});

7. 플러그인 없이 동작

HTML5의 <audio>와 <video> 요소는 별도의 플러그인 없이 모든 최신 브라우저에서 동작합니다. 플래시(Flash)와 같은 외부 플러그인 의존성을 제거하여 더 가벼운 미디어 처리가 가능합니다.

8. 미디어 파일 형식

미디어 파일은 브라우저마다 지원하는 형식이 다를 수 있으므로, 여러 형식의 파일을 제공하는 것이 좋습니다.

일반적인 형식:

오디오: MP3, OGG, WAV
비디오: MP4, WebM, OGG

요약

**<audio>**와 <video> 태그를 사용하면 HTML5에서 오디오 및 비디오 콘텐츠를 쉽게 추가하고 제어할 수 있습니다.
자막이나 텍스트 트랙을 통해 사용자를 위한 추가 정보를 제공할 수 있습니다.
자바스크립트를 통해 미디어를 동적으로 제어하고 상호작용을 추가할 수 있습니다.
최신 브라우저에서 플러그인 없이 오디오와 비디오를 재생할 수 있습니다.

미디어는 웹 콘텐츠를 더욱 풍부하고 생동감 있게 만들어주는 중요한 요소입니다. HTML5의 미디어 태그는 이러한 요소를 손쉽게 통합할 수 있는 도구를 제공합니다.

코딩 스쿨 HTML

HTML Media

1. HTML <audio> 요소

기본 구조:

예시:

2. HTML <video> 요소

기본 구조:

예시:

3. 비디오 및 오디오 속성

공통 속성:

4. 자막 및 텍스트 트랙

예시:

5. 자바스크립트를 통한 미디어 제어

자바스크립트로 미디어 제어 예시:

자바스크립트 속성 및 메서드:

6. 미디어 이벤트

주요 이벤트:

예시:

7. 플러그인 없이 동작

8. 미디어 파일 형식

일반적인 형식:

요약

1. HTML `<audio>` 요소

2. HTML `<video>` 요소