[HTML/CSS] 멀티미디어 삽입하기

텍스트와 이미지뿐만 아니라
오디오, 비디오 등 멀티미디어를 넣을 수 있게 되므로써
웹 페이지가 더욱 풍성해졌습니다

 

멀티미디어 삽입하기

과거 웹 브라우저에서 직접 재생할 수 없어 플러그인에 의존

 

플러그인 사용하기

외부파일 삽입하기

 

1. object 태그

웹 브라우저에서 직접 재생할 수 없는 자바 애블릿, PDF파일 같은 콘텐츠를 포함 시킬 때 사용

 

기본 구조 예시

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

 

2. embed 태그

웹 브라우저에서 직접 재생할 수 없는 콘텐츠를 포함 시킬 때 사용

주로 이전 브라우저에서 사용

 

기본 구조 예시

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

 

비디오 코덱

인코딩과 디코딩을 수행하는 것

- 인코딩 : 원본 비디오를 압축해 컴퓨터에서 사용가능한 비디오 파일로 변환하는 과정

- 디코딩 : 비디오 파일에 저장되어 있는 비디오 정보를 불러와 플레이어에 보여주는 과정

 

TIP!
html5에서는 플러그인없이 브라우저에서 직접 재생할 수 있는 비디오 코덱만 허용

 

---

 

영상 삽입하기

영상 파일 연결 방식

1. video 태그 

로컬 파일에서 불러오는 방식

 

기본 문법

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

TIP!
- 소스 밑에 글을 적어두면 영상이 재생이 안될 때 나옴
- 영상 종류 꼭 작성 (*마임타입 : 팡리을 보낼 때 표시법을 알려주기 위해 함께보내는 파일 형식 정보)

*마임타입
HTML5에서 지원하는 비디오 파일 형식 : MP4, WebM, OGG

파일 형식	미디어 타입
MP4	video/mp4
WebM	video/webm
OGG	video/ogg

 

2. iframe 태그

영상 소스를 통해 불러오는 방식

<ifame src=“삽입할 파일 주소” 속성="속성값"></ifame>

TIP!
- 유튜브 영상등을 삽입 할  때 사용
- figure 태그 밖에 사용

 

---

 

오디오 Audio

audio 태그

오디오를 삽입하는 태그

 

기본 문법

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

마임타입 - audio
HTML5에서 지원하는 비디오 파일 형식 : MP3, WAV, Ogg

파일 형식	미디어 타입
MP3	audio/mp3
WAV	audio/wav
Ogg	audio/ogg

 

---

복수의 멀티미디어 삽입하기

source 태그

여러 멀티미디어 파일을 지정하여 삽입하는 태그

 

기본 문법

<source src=“멀티미디어 파일 경로” type="파일 형식" codecs="비디오 코덱"></source>

TIP!
src와 type 속성은 꼭 써주는 것이 좋습니다

---

 

멀티미디어 관련 속성

속성	효과
controls	컨트롤 바 생성
autoplay	웹 페이지 접속 시 자동재생
muted	영상 재생 시 음소거
loop	무한 재생
preload	재생버튼을 눌러 재생하기 전 미리 파일을 다운로드해 준비해 둠
poster	미디어 재생이 안될 때 나오는 대체 이미지