06_HTML 오디오&비디오 삽입

• 다양한 멀티미디어 파일을 삽입하는 <object>, <embed>태그

- <object>태그는오디오 파일뿐만 아니라 비디오, PDF 등 다양한 멀티미디어 파일을 삽입할 때 사용합니다.

- 웹 문서 안에 다른 문서를 삽입할 때도 사용할 수 있습니다.

기본형

<object width="너비" height="높이" data="파일">/object>

- data 속성에 보여줄 파일을 지정하고 width, height 속성을 사용해 플레이어의 크기를 지정합니다.

- <object>태그를 사용하여 웹 문서에 PDF파일을 삽입하면 PDF 리더가 자동으로 포함되어 보여줍니다.

- <embed>태그는 HTML 초기 버전부터 사용해 왔으므로 오래된 브라우저까지 고려할 때 사용하기 좋습니다.

- <embed>태그는 src속성을 사용해 삽입할 멀티미디어 파일을 지정합니다. <embed>태그는 닫는 태그가 없습니다.

기본형

<embed src="파일 경로" width="너비" height="높이">

- <embed>태그는 오디오, 비디오, 이미지 등 다양한 멀티미디어 파일을 삽입할 수 있습니다.

- HTML의 <audio>, <video>, <object>태그를 지원하지 않는 웹 브라우저를 고려하면 <embed>태그를 사용해서 멀티미디어 파일을 삽입합니다.

 

• 웹 브라우저에서 지원하는 멀티미디어 파일의 종류

- 비디오 파일의 webm형식은 무료이고 화질도 좋지만 webm형식을 지원하지 않는 경우에는 mp4형식을 사용하며, 오디오 파일은 mp3형식을 주로 사용합니다.

종류	확장자	설명
비디오	mp4	많이 사용하는 비디오 형식으로, 라이선스가 있지만 웹에서는 무료로 사용할 수 있습니다.
	webm	화질이 우수하고 무료라서 mp4와 함께 많이 사용합니다.
오디오	mp3	대부분의 음원에서 사용하는 형식으로 무료로 사용할 수 있습니다.
	mp4, m4a	mp3의 문제점을 개선한 ACC코덱을 사용한 파일 형식입니다. 확장자는 mp4뿐만 아니라 m4a를 사용하기도 합니다.

 

• 오디오와 비디오 파일을 삽입하는 <audio>, <video>태그

- HTML에서 음악이나 효과음 등 오디오 파일을 삽입할 때는 <audio>태그를 사용합니다.

- 비디오 파일을 삽입항 때는 <video>태그를 사용합니다.

Tip 컨트롤 바는 재생, 정지 버튼이나 볼륨을 조절할 수 있는 구성요소를 말합니다.

기본형

<audio src="오디오 파일 경로"></audio>
<video src="비디오 파일 경로"></video>

 

• <audio>, <video>태그의 속성

종류	설명
controls	플레이어 화면에서 컨트롤 바를 표시합니다.
autoplay	오디오나 비디오를 자동으로 실행합니다.
loop	오디오나 비디오를 반복 재생합니다.
muted	오디오나 비디오의 소리를 제거합니다.
preload	페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정합니다. 사용할 수 있는 값은 auto, metadata, none입니다.  기본값은 preload="auto"입니다.
width, height	비디오 플레이어의 너비와 높이를 지정합니다. width나 height의 값 중에서 하나만 지정할 경우 나머지는 자동으로 계산해서 표시합니다.
poster="파일이름"	<video>태그에서 사용하는 속성으로 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정합니다.

 

• 섬네일 이미지 삽입

- <video>태그의 poster 속성은 섬네일 이미지를 삽입할 때 사용합니다.

- 섬네일 이미지란 비디오를 재생하기 전까지 화면에 표시하는 이미지를 말합니다.

- 웹 문서에 컨트롤 바와 함께 비디오 파일을 삽입하면 비디오를 재생하기 전까지는 검은 화면만 나타납니다.

- 이때 섬네일 이미지를 사용하면 재생하기 전까지 중요한 내용을 미리 보여줄 수 있습니다.

 

• 비디오 파일 자동 재생

- 웹 문서에서 멀티미디어 파일을 사용할 때 가장 먼저 주의할 점은 자동으로 재생되지 않도록 해야하는 것입니다.

- 웹 접근성 지침에서는 멀티미디어를 사용자 동의 없이 시작하지 않도록 권고하고 있습니다.

- 최신 웹 브라우저에서는 브라우저 자체에서 배경 음악이나 소리가 있는 비디오 파일의 자동 재생을 금지하고 있습니다.

- 만약 비디오 파일을 자동 재생하고 싶다면 소리를 제거해야 합니다.

- 사이트의 배경 화면으로 비디오를 사용하는 경우가 있는데, 이때도 소리를 제거해야 자동으로 재생됩니다.

- <video>태그에서 소리를 제거하는 속성은 muted로 즉, muted속성과 autoplay속성을 함께 사용해야 비디오를 자동으로 재생할 수 있습니다.