4. HTML 멀티미디어

1. HTML Video (비디오 파일 형식)

1-1. MP4 (.mp4)

 Moving Picture Experts Group에 의해 개발되었으며, 고품질의 영상 및 음성을 적은 용량으로 저장할 수 있는 파일 형식이다. 인터넷 스트리밍에 자주 사용된다.

 

1-2. WebM (.webm)

구글의 지원으로 개발된 개방형 공개 멀티미디어 파일 형식이다. 비디오 코덱으로 VP8을 사용하고, 오디오 코덱으로는 Vorbis를 사용한다. 웹에서 널리 지원된다.

 

1-3. OGV (.ogv)

xip 재단에 의해 개발되었으며, 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식이다. MP3의 대안으로 사용되며, 고품질 비디오를 지원한다.

 

htmlCopy code
<video style="width:500px; height:300px" controls loop>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogv" type="video/ogg">
    Your browser does not support the video tag.
</video>

<video> 태그를 사용해서 비디오를 삽입하는데 속성과 요소 설명

1. style : 비디오의 가로와 세로 크기를 설정하는 스타일 속성이다.

2. controls : 이 속성을 사용하면 비디오 플레이어의 컨트롤(재생, 일시정지, 볼륨 조절 등)이 표시된다.

3. loop : 비디오를 반복 재생하도록 지정하는 속성이다.

4. <source> 태그 : 비디오 파일의 주소와 파일 형식을 지정한다. 여러 개의 <source> 태그를 사용하여 다양한 형식의 비디오 파일을 지정할 수 있다. 

   * src : 비디오 파일의 주소를 지정한다.

   * type : 비디오 파일의 형식을 지정한다

5. "Your browser does not support the video tag" 브라우저가 비디오 태그를 지원하지 않을 경우에 대비하여 표시할 메시지를 나타낸다.

<video style="width:500px; height:300px" controls autoplay> 
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogv" type="video/ogg">
    Your browser does not support the video tag.
</video>

autoplay 속성을 사용하여 비디오를 자동으로 재생하도록 설정하고 있다. 사용자가 페이지를 열면 비디오가 자동으로 재생된다.

 

2. HTML Audio (오디오 파일 형식)

HTML5에서는 <audio> 태그를 사용하여 웹 페이지에 오디오를 삽입하는 표준화된 방식을 제공한다. 오디오를 제어하고 재생할 수 있는 컨트롤을 포함하며 여러 오디오 파일 형식을 지원한다.

1-1. MP3 (.mp3)

MPEG-1의 오디오 규격으로 개발된 손실 압축 파일 형식이다. 고품질 오디오를 상대적으로 작은 파일 크기로 저장할 수 있어 널리 사용된다.

1-2. WAV (.mp3)

IBM과 Microsoft에 의해 개발되었으며, 개인용 PC에서 오디오를 재생하기 위한 표준 오디오 파일 형식이다. 손실 없이 압축해도 고해상도 오디오를 저장할 수 있다.

 

1-3. Ogg (.ogg)

xiph 재단에 의해 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식이다. MP3의 대안으로 사용되며, 고품질 오디오를 지원한다.

 

htmlCopy code
<audio controls loop>
    <source src="audio.mp3" type="audio/mp3">
    <source src="audio.ogg" type="audio/ogg">
</audio>

오디오를 제어할 수 있는 컨트롤을 포함하고 있으며, loop 속성을 통해 오디오를 반복 재생한다. <source> 태그를 사용하여 여러 오디오 파일 형식을 제공하고, 웹 브라우저는 지원하는 형식 중에서 사용할 수 있는 첫 번째 파일을 선택한다.

 

htmlCopy code
<audio controls autoplay>
    <source src="audio.mp3" type="audio/mp3">
    <source src="audio.ogg" type="audio/ogg">
</audio>

오디오를 제어하는 컨트롤을 포함하며, autoplay 속성을 추가하여 오디오가 자동으로 재생된다. 마찬가지로 <source> 태그를 사용하여 여러 오디오 파일 형식을 제공한다. <source> 태그를 사용하면 브라우저가 호환 가능한 형식의 오디오 파일을 선택하여 재생할 수 있도록 한다.