[HTML] 오디오와 비디오 삽입하기

✨다양한 멀티미디어 파일을 삽입할 때 쓰는 <object>, <embed> 태그

💡 <object> 태그

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

• data 속성에 보여 줄 멀티미디어 파일을 지정
• width , height 속성을 사용해 플레이어의 크기 지정
• <object> 태그를 사용하여 웹 문서에 PDF 파일을 삽입하면 PDF 리더가 자동으로 포함되어 보여줌

💡 <embed> 태그

• src 속성을 사용해서 삽입할 멀티미디어 파일을 지정
• 닫는 태그 ❌

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

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

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

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

• 오디오나 비디오 파일을 첨부할 때는 방문자가 음악을 재생하거나 멈출 수 있는 컨트롤 바를 나타내는 controls 속성을 함께 넣어주면 좋다.
  
  

✨<audio>, <video> 태그의 속성 알아보기

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

🔨플레이어 표시 없이 배경 음악 넣기

<audio src="동영상 주소" autoplay loop></audio>

🔨비디오 파일 자동 재생하기

<video src="동영상 주소" width="700" muted autoplay loop></video>

크롬 브라우저에서 비디오 파일을 자동 재생하려면 muted 속성을 넣어 소리를 꺼야 한다.

출처: Do it! HTML+CSS+자바스크립트 웹 표준의 정석 (고경희, 이지스퍼블리싱)