웹상에서 음악/동영상 재생 코드 파헤치기

오늘은 웹상에서 음악을 재생하고자 할때 쓰이는 코드 중에 OBJECT 를 이용한 방법에 대해서 알아보기로 하겠습니다.
우선, 미디어 플레이어를 새창으로 띄우지 않고, 컨트롤러만 보이게하는 방법은 저번 시간에 알아 보았습니다. 여기에 OBJECT 와 PARAM을 이용해서 좀 더 다양한 기능을 컨트롤 할 수 있습니다.
가령 예를 들어, 뒤로 가기, 앞으로 가기 버튼을 없앤다던가, 링크 방지를 위해서 마우스 클릭 시 반응이 안되게 한다던가 말이죠. 또한 저번 시간에 배웠던 autostart라던지 loop 등의 기능은 모두 이 태그 안에 포함되어 있습니다.

우선 기존 EMBED 태그가 들어가는 자리에 아래의 코드를 삽입합니다.


<OBJECT classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="300">
<PARAM NAME="Filename" VALUE="음악 파일 경로(예: http://rhythmer.net/media/268/268092.asf)">
<param name="ClickToPlay" value="true">
<param name="AutoSize" value="true">
<param name="AutoStart" value="true">
<param name="ShowControls" value="true">
<param name="ShowAudioControls" value="true">
<param name="ShowDisplay" value="false">
<param name="ShowTracker" value="true">
<param name="ShowStatusBar" value="false">
<param name="EnableContextMenu" value="false">
<param name="ShowPositionControls" value="false">
<param name="ShowCaptioning" value="false">
<param name="AutoRewind" value="true">
<param name="Enabled" value="true">
<param name="EnablePositionControls" value="true">
<param name="EnableTracker" value="true">
<param name="PlayCount" value="1">
<param name="SendWarningEvents" value="true">
<param name="SendErrorEvents" value="true">
<param name="SendKeyboardEvents" value="false">
<param name="SendMouseClickEvents" value="false">
<param name="SendMouseMoveEvents" value="false">
<param name="ShowGotoBar" value="false">
<param name="TransparentAtStart" value="false">
<param name="Volume" value="0">
</OBJECT>


여기서 눈치빠른 분들이시라면 대략적인 응용 방법은 눈치 채셨을꺼라 믿습니다.

<PARAM NAME="Filename" VALUE="음악 파일 경로(예: http://rhythmer.net/media/268/268092.asf)">

이 부분에서 음악 파일 경로를 삽입하고,
밑부분의 <param name> 부분은 기능을 제어하는 태그입니다.

만약 링크 못가져가게 마우스 우측 클릭 후 나타나는 정보창을 막고자 한다면,

<param name="EnableContextMenu" value="false">

이 부분에서 value 값을 true 혹은 false 로 지정하면서 제어할 수 있습니다.
보기와 같이 false로 지정하면 우측 클릭을 해도 반응을 하지 않습니다.
유용하게 쓰이겠죠? ^^


이제 하나하나의 기능을 살펴보기로 할까요?


<param name="ClickToPlay" value="true">
: 동영상 등을 재생할때 화면을 클릭하면 일시 정지되거나 다시 재생하는 기능을 제어하는 기능입니다. true / false로 제어합니다.

<param name="AutoSize" value="true">
: 화면의 비율을 자동으로 제어할 것인지, 말 것인지를 제어하는 기능입니다.
true로 해 놓으면 원래 정해진 화면 비율로 자동으로 재생됩니다.

<param name="AutoStart" value="true">
: 저번 시간에 알아보았던 autostart와 같은 기능입니다.
false로 해놓으면 재생 버튼을 클릭해야 플레이 됩니다.

<param name="ShowControls" value="true">
: 이것 역시 저번 시간에 알아보았던 hidden 태그와 같은 기능으로 false로 지정시 미디어 콘트롤러가 보이지 않게 됩니다.

<param name="ShowAudioControls" value="true">
: 이 기능은 미디어 플레이어 우측의 볼륨 조절기능과 음소거 기능을 제어하는 기능입니다.
false로 지정하시면 볼륨 조정과 음소거 기능이 사라집니다.

<param name="ShowDisplay" value="false">
: 이 부분은 콘트롤러 아래에 음악이나 동영상 파일의 정보를 출력할 것인가 말것인가를 제어하는 부분입니다.
true로 해 놓을 경우 아래에 쇼, 클립, 만든이, 저작권 등의 기능이 출력됩니다.

<param name="ShowTracker" value="true">
: 재생 구간을 보여주는, 재생이 되면서 옆으로 움직이는 부분, 트랙커를 제어하는 기능입니다.
이 부분을 움직여서 원하는 부분만을 들을 수도 있지요.
false로 지정시 트랙커가 사라집니다.

<param name="ShowStatusBar" value="true">
: 컨트롤러 아래에 버퍼링과 남은시간/총시간 을 보여주는 한줄의 정보창을 제어하는 부분입니다.
false로 해놓으면 보이지 않습니다.

<param name="EnableContextMenu" value="true">
: 앞서도 언급했던 마우스 클릭시 나타나는 메뉴를 제어하는 기능입니다.
false로 해놓으면 우측 클릭을 해도 등록정보 등이 있는 메뉴가 나타나지 않습니다.

<param name="ShowPositionControls" value="true">
: 이 부분은 컨트롤러의 뒤로 가기(▶▶), 앞으로 가기(◀◀) 등의 버튼을 제어하는 부분입니다.
false로 해놓으면 재생 버튼과 정지 버튼만 출력됩니다.

<param name="ShowCaptioning" value="false">
: 동영상 등의 자막이 있을때 이를 제어하는 기능입니다.
음악 파일 재생시는 false로 해놓으시면 됩니다.

<param name="AutoRewind" value="true">
: 재생이 끝났을 경우 이 부분을 true로 해놓으면 자동으로 처음으로 돌아갑니다.
false로 해놓으면 끝부분에 그대로 머물러 있습니다.

<param name="PlayCount" value="1">
: 저번 시간에 배웠던 loop와 같은 기능으로 플레이 반복 횟수를 결정합니다.
'-1'로 해놓으면 무한 반복 됩니다.

<param name="Volume" value="0">
: 재생시 자동으로 설정할 볼륨 량을 지정해주는 부분입니다.
보기와 같이 0으로 해놓으면 최대 볼륨으로 재생됩니다.



자! 여기까지 자주 사용하는 param 기능에 대해서 살펴보았습니다.
위의 예시를 메모장에 붙여놓고 HTML 파일로 만들어 놓고, 하나씩 고쳐가며 기능을 살펴보시면 더욱 이해가 빠를 것이라 생각됩니다.