[HTML] 멀티미디어

비디오 (Video)

• 비디오 파일 등을 삽입하기 위해 사용하는 요소로, <video> 태그를 사용한다.
• <video> 태그 사이에 존재하는 텍스트는 웹 브라우저가 <video> 태그를 지원하지 않을 때만 화면에 표시된다.
• HTML5 표준이 공식적으로 지원하는 비디오 파일 형식은 MP4, WebM, OGV 뿐이다.

<video src="/examples/media/sample_video_mp4.mp4" type="video/mp4" style="width:576; height:360" controls autoplay>
    이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타납니다!
</video>

 

HTML5 video 태그

태그	설명
<video>	비디오 파일
<source>	video 요소의 원본 파일에 대한 파일 형식 및 파일 주소를 여러 개 명시 웹 브라우저는 위쪽에서부터 순서대로 가장 먼저 인식되는 파일 형식과 파일 주소를 사용
<track>	비디오 플레이어에 대한 텍스트 자막

HTML5 video 속성

속성	설명
src	재생할 비디오의 주소 지정
autoplay	비디오 자동 재생 지정
loop	비디오 반복 재생 지정
controls	컨트롤러 지정
audio	오디오 채널 제어
height	높이 지정
width	너비 지정
poster	비디오 데이터를 사용할 수 없는 경우, 이미지 파일 주소 지정
preload	다운로드 상태를 나타냄 (none, metadata, auto)

오디오 (Audio)

• 오디오 파일을 삽입하기 위해 사용하는 요소로, <audio> 태그를 사용한다.
• <audio> 태그 사이에 존재하는 텍스트는 해당 웹 브라우저가 <audio> 태그를 지원하지 않을 때만 화면에 표시한다.
• HTML5 표준이 공식적으로 지원하는 오디오 파일 형식은 MP3, WAV, Ogg 뿐이다.

<audio src="/examples/media/sample_audio_mp3.mp3" type="audio/mp3" controls loop>
    이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타납니다!
</audio>

HTML5 audio 요소

요소	설명
audio	오디오와 음악 등 오디오 파일
source	audio 요소의 원본 파일에 대한 파일 형식 및 파일 주소를 여러 개 명시 웹 브라우저는 위쪽에서부터 순서대로 가장 먼저 인식되는 파일 형식과 파일 주소 사용

HTML5 audio 속성

속성	설명
src	재생할 오디오의 주소 지정
autoplay	오디오를 자동 재생
controls	컨트롤 막대 표시 (재생/정지, 진행 바, 볼륨 등)
loop	오디오 반복 재생
muted	소리 끔
preload	재생 전, 오디오 파일 다운로드 후 준비 (none, metadata, auto)

<source>

• 브라우저에 따라 지원하는 코덱이 다르기 때문에 한 가지 파일만 사용할 경우, 일부 브라우저에서는 지원하지 않는 경우가 생긴다.
• 많은 유저들의 환경을 모두 고려한다면, <video>나 <audio> 요소에 <source> 태그를 사용해 주는 것이 좋다.

<source> 태그의 속성

속성	내용
src	대체 미디어 파일의 경로 지정
type	대체 미디어 파일의 타입 지정
codecs	비디오 코덱 지정

<video style="width:576; height:360" controls autoplay>
    <source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
		<source src="/examples/media/sample_video_webm.webm" type="video/webm">
    <source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
    이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타납니다!
</video>