HTML5와 멀티미디어 1

HTML5와 멀티미디어 1

• HTML5 덕분에 웹은 더 풍성해졌습니다. 텍스트와 이미지뿐만 아니라 오디오와 비디오도 넣을 수 있게 되었기 때문입니다.
• 개인 홈페이지에 배경 음악을 넣거나 자신이 촬영한 비디오 영상을 올려 공유할 수도 있습니다. 뿐만 아니라 비디오에 자막을 넣는 것도 HTML5로 가능합니다.

 

웹과 멀티미디어

• 멀티미디어는 HTML5 웹 표준이 정해지면서 가장 많이 변화된 부분입니다.
• HTML4 까지는 웹 브라우저와 멀티미디어가 따로 존재했지만 HTML5에서는 웹 브라우저 안에서 멀티미디어를 직접 재생할 수 있기 때문입니다.

 

1. 플러그인 프로그램

• 오디오나 비디오 같은 멀티미디어를 직접 재생할 수 없던 과거의 웹 브라우저에서는 플러그인(plug-in) 프로그램을 사용했습니다.
• 보통 인터넷에서 음악을 듣거나 온라인 강의를 시청하려고 할 때 특정 프로그램을 설치하라는 메시지가 뜨는 데 이 프로그램이 바로 플러그인 프로그램입니다.
• 하지만 플러그인 프로그램은 여러 문제점들이 있었고 HTML5 웹 표준이 지정되면서 점점 사라지고 있습니다.
• 가장 많이 사용되던 플래시 플레이어도 모바일 브라우저와 마이크로소프트 엣지에서 기본적으로 차단되었고 사용자가 많은 크롬 브라우저도 53버전이 발표된 2016년 9월부터 플래시 플레이어를 차단하고 있습니다.
• 비디오 공유 사이트인 유튜브나 비메오를 비롯해 대부분의 비디오 사이트에서도 이제는 대부분 HTML5 플레이어를 사용합니다.

 

2. <object> 태그와 <embed> 태그 - 플로그인 사용하기

• 웹 브라우저에서 처리할 수 없는 작업을 위해 웹 문서 안에 포함시킨 외부 프로그램 기능을 '플러그인(plug-in)'이라고 합니다. 이런 플러그인은 <object>태그와 <embed> 태그로 사용합니다.
• 아직까지 HTML5를 지원하지 못하는 브라우저가 많기 때문에 이 방법을 알아두어야합니다. 또한 HTML5에서도 웹 문서안에 플러그인을 포함시킬 수 있습니다.

 

1) <object> 태그 - 외부 파일 삽입하기

• <object> 태그는 웹 브라우저에서 직접 재생할 수 없는 자바 애플릿이나 PDF 파일, 플래시 무비 같은 콘텐츠를 웹 문서 안에 포함시키기 위해 사용합니다. 또한 다른 HTML 문서도 웹 문서에 포함시킬 수 있습니다.
• <object> 태그를 사용해 플래시 무비를 재생할 때 data 속성을 이용해 파일 경로를 알려 주고 type 속성을 이용해 플래시 플레이어를 이용하도록 알려 줍니다. 그리고 width와 height 속성을 이용해 화면에 표시할 크기도 지정합니다.

 

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

 

<object> 태그에서 사용할 수 있는 속성들

• <img> 태그에서 src 속성을 반드시 써야 하듯이 특정 외부 파일을 가져와 표시할 것인지 여부를 알려 주기 위해 최소한 data나 type 속성들 중 하나를 반드시 사용해야 합니다.

 

속 성	설 명
data	외부 파일의 경로를 지정합니다.
type	포함시킨 내용의 유형을 지정합니다.
name	다른 요소들과 구분할 수 있는 이름을 지정합니다.
width	포함시킨 내용의 너비 값을 지정합니다.
height	포함시킨 내용의 높이 값을 지정합니다.

 

사용 예) <object data="CalmBay.swf" type="application/x-shockwave-flash" width="500"></object>

2) <embed> 태그 - 외부 파일 삽입하기

• <embed> 태그도 웹 브라우저에서 재생할 수 없는 콘텐츠를 웹 문서에 삽입할 때 사용합니다.
• <object> 태그와 달리 닫는 태그가 없는 <embed> 태그는 주로 <object> 태그를 지원하지 않는 이전 브라우저에서 사용됩니다.

 

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

 

사용 예) <embed src="CalmBay.swf" width="500" height="400">

참고 : HTML5 + CSS3 웹 표준의 정석