<HTML5+CSS3> 멀티미디어 재생하기

플러그인 프로그램으로 멀티미디어 재생하기

인터넷에서 음악을 듣거나 영화를 보거나 강의를 볼때 어도비 플래시나 엑티비티X등 플러그인 프로그램을 설치했을것이다. 그래야 오디오나 비디오 파일을 자유롭게 볼 수 있으니, 하지만 여러 문제점들이 많았고 악의적인 행동을 액티비티 X 에 담아서 컨트롤할 수 있었다. 이러한 불편함과 위험을 감수하면서도 플러그인을 사용하는 이유는 웹 브라우저에서 이미지를 제외한 음악이나 동영상 같은 멀티미디어를 스스로 재생할 수 없기 때문이다.

HTML4에서는 웹 브라우저에서 이런 플러그인 프로그램을 불러와 멀티미디어 파일을 재생하기 위 해 <object>나 <embed>태그를 사용했습니다.

-HTML4에서는 <embed>태그와 <object>태그를 이용해 멀티미디어를 삽입하곤 했다. 

<embed>의 장점:사용의 쉽다

단점:HTML4의 표준 태그가 아니다.

<object>의 장점:다양한 미디어를 넣을 수 있다.

단점:사용이 복잡하다.

<embed>태그

eX) <embed src="미디어 파일 경로(확장자까지)" [width="너비" height="높이">>

 다음 소스는 웹 브라우저에서 읽으면 웹 브라우저에서 직접 재생할수 없어 윈도우 미디어 플레이어나 퀵타임 플레이어처럼 해당 웹 브라우저에 멀티미디어 재생용으로 설치되어 있는 플러그인 프로그램을 실행한 후 보여준다.

속성

-<embed>에 사용할 수 있는 속성은 src,width,height이 있다.

1.src:미디어 파일의 경로를 지정합니다.

ex> <embed src="inro.swf">

2.wight,height:화면의 너비 및 높이 지정

ex> <embed src="inro.swf" width="560 height="315">

<object>택태그와 <param>태그

-HTML4에서는 멀티미디어 파일을 웹 문서에 삽입할 때 <object>태그를 사용하는 것이 표준이었다.

<object>태그를 사용하면 동영상,무비,자바애플릿 등 다양한 미디어를 넣을 수 있었다.

eX) <object width="너비" height="높이" data="파일이름">

<param name="매변수 이름" value="값"> </parm>

</object>

<object>태그에서는 <parm>이라는 태그를 통해 플러그인 프로그램으로 여러 가지 값을 가진 매개변수를 전달한다.  예를들어 실행 파일 경로나 전체화면 크기로 실행할지, 자동 재생할 것인지 등의 여부를 매개변수를 통해 알려준다.

<parm>태그의 name속성에서 사용할 수 있는 매개변수들은 다양한데, 그중에서 자주 사용하는 것들은 아래 내용과 같다 파일 경로를 지정해 주는 fileName매개변수는 그 값을 파일 경로로 하면 되고 그외 매개 변수들은 대부분 ture(또는1)이나 false(또는 0)값을 지정하면 된다.

%삽입하는 미디어 파일에 따라 name속성에 사용하는 매개변수 이름이 달라질 수 있다.

매개변수

name : 재생할 파일의 경로를 지정한다.

AutoSize:플레이어 크기를 고정할지 지정합니다

AutoPlay:자동 재생할지 지정합니다

AutoRewind:음악이나 동영상의 재생이 끝난 후 자동 되감기 할 것인지 지정합니다

ClickToPlay: 이 파라미터의 값을 1로 지정하면 재생 버튼을 클릭해서 재생하고, 재생 버튼을 한번 더 클릭하면 일시 정지                   됩니다.

Enabled:기능 버튼을 사용할지 지정합니다.

ShowTracker:재생되는 상황을 트래커에 슬라이드로 보여줄지 지정합니다.

EnableTrack:트래커에서 슬라이드 바를 사용할지 지정합니다.

ShowAudioControls:륨 조절기를 표시할지 지정합니다.

등등 192p 표를 참조하면 있다.

<object>태그는 아직도 여러 동영상 사이트에서 사용되고 있다. 대표적으로 비메오닷컴 사이트가 있다.