본문 바로가기
Common Gateway Interface/HTML + CSS + Javascript

Windows Media Player ActiveX 플러그인을 이용한 음악/영상 재생예제

코딩집사 2018. 1. 20. 17:24
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

Windows Media Player ActiveX 플러그인을 이용한 음악/영상 재생예제

ActiveX를 선호하지는 않지만, 간혹 필요한 경우가 있으므로 Windows Media Player ActiveX 플러그인을 HTML 문서에 삽입하는 방법에 대해 정리해 둔다.

1. 플러그인 삽입

여느 ActiveX가 그렇듯이 Windows Media Player도
classid = 22d6f312-b0f6-11d0-94ab-0080c74c7e95
codebase = http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715
type = application/x-oleobject
의 3가지 속성을 지정하여 플러그인을 로드한다. Internet Explorer라면 classid, codebase 속성을 사용하여 해당 플러그인을 로드하겠지만, Internet Explorer가 아닌 브라우저로 로드할 경우를 대비하여 다음과 같은 이중 구조로 플러그인 코드를 넣는다.

<object classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715" type="application/x-oleobject" id="TODO: id값" name="TODO: name값" width="TODO: 너비" height="TODO: 높이" border="TODO: 테두리">
    <!--[if !IE]> <-->
    <object type="video/x-ms-wmv" id="TODO: id값" name="TODO: name값" width="TODO: 너비" height="TODO: 높이">
    </object>
    <!--> <![endif]-->
</object>

다음과 같이 기본적인 Windows Media Player 화면이 나타날 것이다.

Windows Media Player 버전별 clsid

Windows Media Player 6.0
clsid:05589FA1-C356-11CE-BF01-00AA0055595A
Windows Media Player 6.4
clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95
Windows Media Player 7.0
clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6
Windows Media Player 9.0
clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6 (7.0과 동일)
Windows Media Player 10.0
clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6 (7.0과 동일)

2. 미디어 경로 지정

param 태그를 사용하여 Windows Media Player에 미디어 경로를 전달한다. 매개변수의 이름은 Filename이다. Internet Explorer가 아닌 브라우저로 로드할 경우 매개변수의 이름은 src가 될 수도 있고 data 속성으로 미디어의 경로를 전달할 수도 있다.

<object classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715" type="application/x-oleobject" id="TODO: id값" name="TODO: name값" width="TODO: 너비" height="TODO: 높이" border="TODO: 테두리">
    <param name="Filename" value="TODO: 미디어경로" />
    <!--[if !IE]> <-->
    <object type="video/x-ms-wmv" id="TODO: id값" name="TODO: name값" width="TODO: 너비" height="TODO: 높이" data="TODO: 미디어경로">
        <param name="src" value="TODO: 미디어경로" />
    </object>
    <!--> <![endif]-->
</object>

주의할 것은 Windows Media Player 7.0 이후의 플러그인에서는 미디어 경로를 전달하는 매개변수가 Filename이 아니라 url이라는 것이다. 올바른 경로라면 다음과 같이 동영상/소리가 재생될 것이다.

3. 자막 지정

Windows Media Player 플러그인은 smi 형식의 자막 파일을 지정할 수 있다. 자막의 경로를 지정하는 매개변수의 이름은 SAMIFileName이고, 자막이 출력되는 HTML 문서의 요소를 지정하는 매개변수의 이름은 CaptioningID이다.

<object classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715" type="application/x-oleobject" id="TODO: id값" name="TODO: name값" width="TODO: 너비" height="TODO: 높이" border="TODO: 테두리">
    <param name="Filename" value="TODO: 미디어경로" />
    <param name="SAMIFileName" value="TODO: 자막경로" />
    <param name="SAMILang" value="TODO: 자막언어" />
    <param name="CaptioningID" value="TODO: 자막출력id" />
    <!--[if !IE]> <-->
    <object type="video/x-ms-wmv" id="TODO: id값" name="TODO: name값" width="TODO: 너비" height="TODO: 높이" data="TODO: 미디어경로">
        <param name="src" value="TODO: 미디어경로" />
        <param name="SAMIFileName" value="TODO: 자막경로" />
        <param name="SAMILang" value="TODO: 자막언어" />
        <param name="CaptioningID" value="TODO: 자막출력id" />
    </object>
    <!--> <![endif]-->
</object>
<!-- ... 중략 ... -->
<div id="TODO: 자막출력id" alt="자막이 출력될 영역"></div>

SAMIFilename 속성은 smi 형식 자막의 경로를 지정한다. 가장 흔하게 쓰이는 속성이다.

SAMILang 속성은 하나의 smi 자막에 여러 언어의 자막이 들어있는 경우 이 중 어떤 언어를 선택할 것인지를 지정한다. 예를 들면 다음과 같이 지정된 SAMI 자막이 있다고 한다.

<STYLE TYPE=text/css>
    .ENUSCC {Name:'English Captions' lang: en-US; SAMIType:CC;}
    .KOKRCC {Name:'Korean Captions' lang: ko-KR; SAMIType:CC;}
</STYLE>
<!-- ... 생략 ... -->

이 때, SAMILang 매개변수로 특정 언어를 지정할 때는 SAMI 파일에서 Name 속성으로 지정된 값, 즉 "English Captions" / "Korean Captions" 등으로 선언된 문자열을 지정한다.

SAMIStyle 속성은 자막의 스타일을 선택한다. 하나의 자막에는 여러개의 스타일이 들어있을 수 있는데 이 중 어떤 스타일을 선택할 것인지를 지정한다. 예를 들면 다음과 같이 여러 스타일이 정의된 자막이 있다고 한다.

<STYLE TYPE=text/css>
    #Emphasis1 { Name: Big Bold Italic; font-size: 14pt; text-align: center; color: blue; font-family: sans-serif; font-weight: bold; font-style: italic; }
    #Emphasis2 { Name: Bold Italic; font-size: 12pt; text-align: center; color: blue; font-family: sans-serif; font-weight: bold; font-style: italic; }
    #Emphasis3 { Name: Italic; font-size: 10pt; text-align: center; color: blue; font-family: sans-serif; font-style: italic; }
</STYLE>

이 때, SAMIStyle 매개변수로 특정 스타일을 지정할 때는 SAMI 파일에서 Name 속성으로 지정된 값, 즉 "Big Bold Italic" / "Bold Italic" / "Italic" 등으로 선언된 문자열을 지정한다.

4. UI 설정

Windows Media Player 플러그인의 화면은 다음과 같은 구성요소를 포함한다.

Captioning
미디어에 연계된 배너 또는 자막(SMI 아님)을 표시하는 영역이다. ShowCaptioning매개변수로 true 또는 1을 전달하면 이 영역이 보여지고, false 또는 0을 전달하면 이 영역이 보이지 않는다.
Tracker
현재 재생중인 미디어의 위치를 표시하거나 조정하는 영역이다. ShowTracker매개변수로 true 또는 1을 전달하면 이 영역이 보여지고, false 또는 0을 전달하면 이 영역이 보이지 않는다.
Controls
재생/일시정지 및 정지 버튼을 표시하는 영역이다. ShowControls매개변수로 true 또는 1을 전달하면 이 영역이 보여지고, false 또는 0을 전달하면 이 영역이 보이지 않는다.
PositionControls
이전 미디어, 다음 미디어 등을 로드하는 버튼이 있는 영역이다. ShowPositionControls매개변수로 true 또는 1을 전달하면 이 영역이 보여지고, false 또는 0을 전달하면 이 영역이 보이지 않는다.
AudioControls
음량을 조절하는 컨트롤이 있는 영역이다. ShowAudioControls매개변수로 true 또는 1을 전달하면 이 영역이 보여지고, false 또는 0을 전달하면 이 영역이 보이지 않는다.
GotoBar
현재 재생중인 미디어가 부분 재생을 지원할 경우, 건너뛰기가 가능한 재생 위치를 표시하는 영역이다. ShowGotoBar매개변수로 true 또는 1을 전달하면 이 영역이 보여지고, false 또는 0을 전달하면 이 영역이 보이지 않는다.
Display
현재 재생중인 미디어의 정보(제목, 제작사, 저작권정보 등)가 표시되는 영역이다. ShowDisplay매개변수로 true 또는 1을 전달하면 이 영역이 보여지고, false 또는 0을 전달하면 이 영역이 보이지 않는다.
StatusBar
본 Windows Media Player 플러그인의 상태(재생/정지/일시정지/버퍼링/최적화 여부 및 재생시간 등)가 표시되는 영역이다. ShowStatusBar매개변수로 true 또는 1을 전달하면 이 영역이 보여지고, false 또는 0을 전달하면 이 영역이 보이지 않는다.

5. 기타 설정

AudioStream
미디어가 여러개의 오디오 스트림을 갖고 있는 경우 어떤 오디오 스트림으로 재생할 것인지를 지정한다. 예를 들어, 하나의 영상에 다국어로 녹음된 오디오가 포함되어 있을 경우 어떤 언어로 녹음된 오디오를 재생할 것인지를 지정하는 옵션이다.
AutoSize
미디어의 원본 크기에 따라 플러그인의 크기를 조정할 것인지 여부를 지정하는 옵션이다.
AutoStart
플러그인이 로드되면 자동으로 미디어를 불러와서 재생할 것인지 여부를 지정하는 옵션이다.
AnimationAtStart
재생할 미디어가 로드되는 동안 미리 준비된 별도의 화면을 표시할 것인지 여부를 지정하는 옵션이다.
AllowScan
빨리감기, 빨리되감기 등으로 미디어의 탐색을 허용할 것인지 여부를 지정하는 옵션이다.
AllowChangeDisplaySize
미디어의 원본 크기에 따라 플러그인의 크기를 조정할 것인지 여부를 지정하는 옵션이다. AutoSize 옵션이 활성화되어야 본 옵션이 유효하다.
AutoRewind
미디어의 재생이 끝나면 Tracker를 맨 처음 위치로 되돌릴 것인지 여부를 지정하는 옵션이다.
Balance
미디어가 스테레오 사운드를 포함할 때 좌/우 균형을 지정한다. 기본값은 0이며 -10,000 ~ 10,000의 범위를 갖는다. 양수는 오른쪽 사운드를 더 강조시키고 음수는 왼쪽 사운드를 더 강조시킨다.
BufferingTime
버퍼링 시간을 지정한다.
ClickToPlay
재생버튼이 아닌 화면 영역을 클릭 할 경우에도 미디어를 재생할 것인지 여부를 지정하는 옵션이다.
CurrentPosition
재생을 시작할 위치를 초단위로 지정한다.
CurrentMarker
미디어가 부분재생을 위한 마커를 포함하고 있을 경우 재생을 시작할 위치를 마커의 번호로서 지정한다.
DisplayBackColor
Display 영역의 배경색을 지정한다.
DisplayForeColor
Display 영역의 전경색을 지정한다.
Enabled
본 플러그인의 활성화 여부를 지정한다.
EnableContextMenu
플러그인에 대해 마우스 우클릭을 했을 때 메뉴를 보일 것인지 여부를 지정한다.
EnablePositionControls
PositionControls 영역에 있는 버튼들의 활성화 여부를 지정한다.
EnableFullScreenControls
전체 화면시 Controls 영역의 표시 여부를 지정한다.
EnableTracker
Tracker의 활성화 여부를 지정한다.
InvokeURLs
ASF 파일의 경우 미디어를 열 때 브라우저를 통해 특정 URL을 함께 여는 URL Flipping이라는 기능이 있는데 이 기능을 활성화 할 것인지 여부를 지정한다.
Language
로케일(locale)을 설정한다.
Mute
음소거 여부를 지정한다.
PlayCount
반복 재생할 횟수를 지정한다.
Rate
재생 배속을 설정한다. 1.0이 기본값이다.

관련 사이트

Windows Media Player Properties
https://msdn.microsoft.com/en-us/library/ms930698.aspx
Windows Media Player コントロール Version 6.4 のプロパティ
https://msdn.microsoft.com/ja-jp/library/cc392570.aspx
ClosedCaption.SAMILang
https://msdn.microsoft.com/en-us/library/windows/desktop/dd562611(v=vs.85).aspx
ClosedCaption.SAMIStyle
https://msdn.microsoft.com/en-us/library/windows/desktop/dd562613(v=vs.85).aspx
Windows Media Player Reference
http://w3schools.sinsixx.com/media/media_playerref.asp.htm
저작자표시 비영리 변경금지

티스토리툴바