6. 멀티미디어를 넣어보자 - VIDEO

2017. 8. 6. 23:14하루만에 프로그래밍 끝내기/HTML

1. 홈페이지를 만들 때 이미지뿐만 아니라 다양한 멀티미디어를 삽입하면 어떨까요? 동영상이나 멀티미디어를 홈페이지에서 바로 보여 줄 수 있도록 만들어 봅니다.


2. 비디오를 사입하는 방법을 알아봅니다.

 
<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>멀티미디어</title>
</head>
<body>
 <video width="400px"; height="300px"; controls>
  <source src="video.mp4" type="video/mp4">
  <span>브라우저에서 비디오를 지원하지 않습니다.</span><br>
 </video>
</body>
</html>


3. html5에서 지원하는 비디오 파일의 종류와 브라우저 버전을 알아봅니다.

파일 형식 

설명 

OGG (.ogg, .ogv) 

스트리밍 방식의 멀티미디어 표현을 위한 공개 소스 기반의 파일형식 입니다. 

MPEG4 (.mp4, .m4v) 

MPEG-4에서 규정된 비디오 파일 형식이니다. 

WebM (.webm) 

구글이 html5의 동영상에 사용하기 위해 개발한 오픈 소스 방식의 멀티미디어 파일입니다. 


브라우저 

버젼 

MP4 

WebM 

Ogg 

크롬 

4.0 

YES 

YES 

YES 

파이어폭스 

3.5 

YES 

YES 

YES 

사파리 

4.0 

YES 

YES 

NO 

오페라 

10.5 

YES 

NO 

YES 

인터넷 익스플로러 

9.0 

YES 

NO 

NO 


4. video 요소의 속성을 알아봅시다.

src="파일주소" 

재생할 비디오 파일의 주소를 지정합니다. 

width="수치" 
height="수치"

비디오의 가로, 세로 크기를 지정합니다. 

type="비디오 타입" 

비디오 파일의 타입을 지정합니다. 웹 브라우저는 비디오 파일을 로드하지 않고도 먼저 재생 가능한지 type을 통해 확인할 수 있습니다.

type="video/mp4" (mp4의 경우)
type="video/ogg" (ogg의 경우) 
type="video/webm" (webm의 경우)