HTML5와 멀티미디어

1.  <object> 태그 - 외부 파일 삽입하기

웹 브라우저에서 직접 재생할 수 없는 자바 애플릿이나 PDF 파일, 플래시 무비 같은 콘텐츠를 웹 문서 안에 포함시기키 위해 사용합니다.

<object data="경로" type="유형" name="이름" width="너비" height="높이"></object>

<img> 태그에서 src 속성을 반드시 사용해야 하듯이 특정 외부 파일을 가져와 표시할 것인지 여부를 알려주기 위해 최소한 data나 type 속성 둘 중 하나를 반드시 사용해야 합니다.

2. <embed> 태그 - 외부 파일 삽입하기

<embed src="경로" type="유형" width="너비" height="높이">

<embed> 태그는 닫는 태그가 없고 주로 <object> 태그를 지원하지 않는 이전 브라우저에서 사용됩니다.

3. <audio> 태그 - 오디오 파일 삽입하기

HTML5에서 배경 음악이나 효과음 등 오디오를 삽입할 때는 <audio> 태그를 사용합니다. 일반적으로 대부분의 브라우저에서는 mp3 파일을 삽입합니다.

<audio src="오디오 파일 경로" [속성] [속성="속성 값"]</audio>

<audio> 태그에서 사용할 수 있는 속성은 다음과 같습니다.

속성	설명
autoplay	오디오를 자동 재생한다.
controls	웹 화면에 컨트롤 막대를 표시한다. 컨트롤 막대에는 재생/멈춤, 진행 바, 볼륨 등이 표시된다.
loop	오디오를 반복 재생한다.
muted	오디오를 재생해 진행하지만 소리는 끈다.
preload	파일을 재생하기 전에 미디어 파일을 모두 다운로드할 것인지, 일부 정보만 다운로드 할 것인지 지정한다. none - 미디어 파일을 미리 다운로드하지 않고 사용자가 재생 버튼을 눌러야만 다운로드를 시작한다. metadata - 미디어 파일 전체를 다운로드하지 않고 메타 정보만 다운로드한다. auto - 웹 문서를 로드할 때 미디어 파일도 모두 다운로드한다. 기본 값.
width, height	비디오의 크기를 조절한다.
poster	비디오를 재생할 수 없을 경우, 대신 표시하는 이미지를 지정한다.

4. <video> 태그 - 비디오 파일 삽입하기

<video src="비디오 파일 경로" [속성] [속성="속성 값"]</video>

<video> 태극에서 사용할 수 있는 속성은 <audio> 태그와 거의 일치한다.

5. <source> 태그 - 여러 미디어 파일 한꺼번에 지정하기

<source> 태그에는 미디어 파일의 경로를 지정하는 src 속성과 미디어 파일의 형식을 알려주는 type 속성을 사용합니다. 간단히 type 속성만 사용할 수도 있고 codecs 속성을 이용해 코덱까지 함께 표시할 수도 있습니다.

<video controls>

        <source src="media/Painting.ogv" type="video/ogg">

        <source src="media/Painting.mp4" type="video/mp4">

        <source src="media/Painting.webm" type="video/webm">

</video>

6. <track> 태그  - 자막 삽입하기

속성	설명
kind	자막의 종류를 지정한다. subtitles - 비디오 화면에 표시되는 자막이다. 기본 값.  captions - 비디오 화면에 표시되는 캡션이다. 청각장애인용 자막이거나 소리를 들을 수 없을 때 사용한다. descriptions - 비디오 콘텐츠에 대한 설명이다. 비디오 화면에 표시되지 않는다. chapters - 비디오 탐색을 위한 장 제목이다. 비디오 화면에 표시되지 않는다. metadata - 비디오 콘텐츠 정보이다. 비디오 화면에 표시되지 않는다.
src	자막 테스트의 파일 경로를 지정한다.
srclang	사용한 언어를 지정한다.
label	자막이 여러 개일 경우, 식별할 수 있도록 제목을 달아 준다.
default	자막이 여러 개일 경우, 기본으로 사용할 자막을 default로 지정할 수 있다.

<track src="Wildlife.vtt" srclang="ko" label="Korean" default>

<출처> HTML5+CSS3 웹 표준의 정석