[HTML] 미디어 삽입 (비디오, 오디오)

비디오 삽입

<video src="비디오 파일의 url"
	width="비디오 재생 영역의 폭"
	height="비디오 재생 영역의 높이"
	controls
	autoplay
	muted
	loop>
    이 태그를 지원하지 않는 브라우저가 출력하는 메세지
</video>

- width, height : 비디오가 재생될 브라우저 공간의 높이와 폭 지정. 생략되면 비디오 원본 크기로 지정

- controls : 이 속성이 설정되면 재생, 재생 시간, 중단, 음소거 등 제어 버튼 출력

- autoplay : 이 속성이 설정되면 비디오 로딩 즉시 재생

- loop : 이 속성이 설정되면 반복 재생

- muted : 오디오를 끌 때 사용

<source src="비디오 파일의 url"
	type="비디오의 마임 타입">

 

* HTML5에서 재생 가능한 비디오 타입

video/mp4, video/webm, video/ogg

---

<video src="bear.mp4" width="320" height="240" controls autoplay> 
	브라우저가 video 태그를 지원하지 않습니다. 
</video>

비디오 소스는 <source> 태그를 이용하여 별도로 지정할 수도 있다.

 

<video width="320" height="240" controls autoplay> 
	<source src="bear.mp4" type="video/mp4"> 
	<source src="bear.ogg" type="video/ogg"> 
	브라우저가 video 태그를 지원하지 않습니다. 
</video>

비디오 소스는 <source> 태그를 이용하여 별도로 지정할 수도 있다. 브라우저에 따라서 특정 타입의 비디오 파일만 인식할 수 있기 때문에, 개발자가 하나의 비디오를 여러 타입으로 만들어 두고, 브라우저가 재생 가능한 타입을 선택하도록 할 수 있다. 브라우저가 bear.mp4를 재생할 수 없으면 bear.ogg를 재생한다.

---

오디오 삽입

<audio src="오디오 파일의 url"
	controls
	autoplay
	loop>
	이 태그를 지원하지 않는 브라우저가 출력하는 메세지
</audio>

- controls : 이 속성이 설정되면 재생, 재생 시간, 중단, 음소거 등 제어 버튼 출력

- autoplay : 이 속성이 설정되면 오디오 로딩 즉시 재생  → 모바일에서는 보안상의 이유로 작동 X

- loop : 이 속성이 설정되면 반복 재생

<source src="오디오 파일의 url"
	type="오디오의 마임 타입">

* HTML5에서 재생 가능한 오디오 타입

audio/mpeg, audio/wav, audio/ogg

---

<audio controls autoplay>
	<source src="mymusic.mp3" type="audio/mpeg">
	<source src="mymusic.ogg" type="audio/ogg">
	브라우저가 audio 태그를 지원하지 않습니다.
</audio>

<video> 태그와 마찬가지로 <source> 태그를 이용하면 브라우저가 재생 가능한 타입을 선택하게 할 수 있다. 브라우저가 mymusic.mp3를 재생할 수 없으며 mymusic.ogg를 재생한다.