WindowsMediaPlayerのスキンを作る

chakemiです。 今回はWindowsMediaPlayerのスキンを作ってみたいと思います。

WindowsMediaPlayerのスキンと言えば、以下のページのように様々なものがあります。

Windows Media Player 用スキン

開発環境

  • メモ帳
  • 動作確認 WindowsMediaPlayer Version9~10

仕組みは至って単純でXML、JScript、アートファイル(MSではこう呼んでますが、.bmp、.gif、.jpg、.pngの画像ファイルです)から構成されています。

xmlはスキン定義ファイルで拡張子を.wmsとなります。JScriptはイベントなどに対し複雑な処理をさせたい場合に用います。 アートファイルはそのままビジュアル部分になります。

今回は時間が無いので、簡単にサンプルのテキストベースのプレイヤースキンにファイルオープンダイアログとビデオ表示部分を追加してみました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<THEME>
  <VIEW height = "450" width = "400" >
      <VIDEO top = "150" left = "0" width = "400" height = "300" />
      <TEXT
          width = "150"
          fontSize = "30"
          hoverFontStyle = "Bold"
          hoverForegroundColor = "red"
          disabledForegroundColor = "#CCCCCC"
          justification = "Center"
          value = "Play"
          cursor = "hand"
          enabled = "wmpenabled:player.controls.play"
          onClick = "JScript: player.controls.play();"
      />
      <TEXT
          width = "600"
          fontsize = "30"
          hoverFontStyle = "bold"
          hoverForegroundColor = "red"
          disabledForegroundColor = "#CCCCCC"
          justification = "Center"
          value = "File Open"
          cursor = "hand"
          onClick = "JScript:player.URL=theme.openDialog('FILE_OPEN','FILES_ALL');"
      />
      <TEXT
          top = "50"
          width = "150"
          fontSize = "30"
          hoverFontStyle = "Bold"
          hoverForegroundColor = "red"
          disabledForegroundColor = "#CCCCCC"
          justification = "Center"
          value = "Stop"
          cursor = "hand"
          enabled = "wmpenabled:player.controls.stop"
          onClick = "JScript: player.controls.stop();"
      />
      <TEXT
          top = "100"
          width = "150"
          fontSize = "30"
          hoverFontStyle = "Bold"
          hoverForegroundColor = "red"
          justification = "Center"
          value = "Close"
          cursor = "hand"
          onClick = "JScript: view.close();"
      />
  </VIEW>
</THEME>

こんな感じになりました。

C:\Program Files\Windows Media Player\SkinsにコピーしてWindowsMediaPlayerの「表示」→「移動」→「スキンセレクタ」から選択出来ます。 詳しくは、WindowsMediaPlayerSDKのヘルプの「Windows Media Player Skins」の項目をご参照ください。

次回は、も少しデザインを意識するのとwms、js、アートファイルをzipアーカイブにしたwmzファイルを作成してみます。

Comments