Windows Media Player skins 作成サンプル
Windows Media Players Skinsの作成サンプルです。
意外とソースコードを公開している人が少ないので…
ダウンロード
◆動画再生
◆オーディオ再生
◆プレイリスト
<theme
title="test wmp skins"
author="niyo"
copyright="(c) niyo 2012"
>
<view
width="320" height="jscript:20+240+14"
minwidth="10" minheight="10"
backgroundcolor="black"
title="wmpprop:player.currentMedia.name"
titlebar="false"
resizable="true"
onload="for(var i=1;i<=20;i++){zoompopup.AppendItem(i*10+'%');};play.visible=(player.playstate!=3);zoom.visible=video.visible=(player.currentMedia.ImageSourceWidth>0);"
>
<!-- PLAYER -->
<player
openstatechange="if(player.openstate==13){seek.value=0;albumartsmall.backgroundImage=albumartlarge.backgroundImage='';albumartsmall.backgroundImage='WMPImage_AlbumArtSmall';albumartlarge.backgroundImage='WMPImage_AlbumArtLarge';}"
playstatechange="play.visible=(player.playstate!=3);if(player.playstate==3){zoom.visible=video.visible=(player.currentMedia.ImageSourceWidth>0);}"
/>
<!-- TOP AREA -->
<subview
id="ta"
left="0" top="0" width="jscript:view.width" height="20"
horizontalalignment="stretch"
verticalalignment="top"
backgroundcolor="#24140e"
>
<text
id="menu"
left="0" top="0" width="10" height="10"
tabstop="true"
fontface="MS UI Gothic"
fontsize="7"
justification="center"
value="▼"
tooltip="jscript:tooltip=id"
foregroundcolor="jscript:normalcolor.foregroundcolor"
backgroundcolor="jscript:systembackgroundcolor.backgroundcolor"
onmouseover="backgroundcolor=hoversystembackgroundcolor.backgroundcolor;"
onmouseout="backgroundcolor=systembackgroundcolor.backgroundcolor;"
onclick="auto.show('Play');"/>
<automenu
id="auto"
left="2" top="10"/>
<text
id="zoom"
left="0" top="10" width="10" height="10"
visible="false"
tabstop="true"
fontface="jscript:menu.fontface"
fontsize="9"
fontstyle="bold"
justification="center"
value="+"
tooltip="video size"
foregroundcolor="jscript:normalcolor.foregroundcolor"
backgroundcolor="jscript:systembackgroundcolor.backgroundcolor"
onmouseover="backgroundcolor=hoversystembackgroundcolor.backgroundcolor;"
onmouseout="backgroundcolor=systembackgroundcolor.backgroundcolor;"
onclick="zoompopup.show()"/>
<popup
id="zoompopup"
left="0" top="20"
visible="false"
selectedItem_onchange="if(player.currentMedia.ImageSourceWidth>0){var z=selectedItem*0.1;view.width=player.currentMedia.ImageSourceWidth*z;view.height=ta.height+player.currentMedia.ImageSourceHeight*z+ba.height;}"
/>
<text
id="name"
left="12" top="2" width="wmpprop:ta.width-140" height="jscript:ta.height"
tabstop="false"
foregroundcolor="jscript:normalcolor.foregroundcolor"
backgroundcolor="jscript:ta.backgroundcolor"
fontface="MS UI Gothic"
fontsize="12"
value="wmpprop:player.currentMedia.name"
tooltip="wmpprop:value"/>
<text
id="pos"
left="wmpprop:ta.width-116" top="0" width="35" height="jscript:ta.height"
tabstop="false"
foregroundcolor="jscript:name.foregroundcolor"
backgroundcolor="jscript:ta.backgroundcolor"
fontface="MS UI Gothic"
fontsize="11"
justification="right"
value="wmpprop:player.controls.currentPositionString"
tooltip="wmpprop:value"/>
<text
id="label1"
left="wmpprop:ta.width-81" top="0" width="5" height="jscript:ta.height"
visible="wmpprop:pause.visible"
tabstop="false"
foregroundcolor="jscript:name.foregroundcolor"
backgroundcolor="jscript:ta.backgroundcolor"
fontface="jscript:pos.fontface"
fontsize="jscript:pos.fontsize"
justification="left"
value="/"/>
<text
id="duration"
left="wmpprop:ta.width-75" top="0" width="35" height="jscript:ta.height"
tabstop="false"
foregroundcolor="jscript:name.foregroundcolor"
backgroundcolor="jscript:ta.backgroundcolor"
fontface="jscript:pos.fontface"
fontsize="jscript:pos.fontsize"
justification="right"
value="wmpprop:player.currentMedia.durationString"
tooltip="wmpprop:value"/>
<text
id="return"
left="wmpprop:ta.width-39" top="0" width="12" height="12"
tabstop="true"
fontface="jscript:menu.fontface"
fontsize="9"
justification="center"
value="F"
tooltip="return full mode"
foregroundcolor="jscript:normalcolor.foregroundcolor"
backgroundcolor="jscript:systembackgroundcolor.backgroundcolor"
onmouseover="backgroundcolor=hoversystembackgroundcolor.backgroundcolor;"
onmouseout="backgroundcolor=systembackgroundcolor.backgroundcolor;"
onclick="view.returnToMediaCenter();"/>
<text
id="minimize"
left="wmpprop:ta.width-25" top="0" width="12" height="12"
tabstop="true"
fontface="jscript:menu.fontface"
fontsize="9"
fontstyle="bold"
justification="center"
value="_"
tooltip="wmpprop:id"
foregroundcolor="jscript:normalcolor.foregroundcolor"
backgroundcolor="jscript:systembackgroundcolor.backgroundcolor"
onmouseover="backgroundcolor=hoversystembackgroundcolor.backgroundcolor;"
onmouseout="backgroundcolor=systembackgroundcolor.backgroundcolor;"
onclick="view.minimize();"/>
<text
id="close"
left="wmpprop:ta.width-12" top="0" width="12" height="12"
tabstop="true"
fontface="jscript:menu.fontface"
fontsize="9"
fontstyle="bold"
justification="center"
value="X"
tooltip="wmpprop:id"
foregroundcolor="jscript:normalcolor.foregroundcolor"
backgroundcolor="jscript:systembackgroundcolor.backgroundcolor"
onmouseover="backgroundcolor=hoverclosebackgroundcolor.backgroundcolor;"
onmouseout="backgroundcolor=systembackgroundcolor.backgroundcolor;"
onclick="view.close();"/>
</subview>
<!-- CONTENTS AREA -->
<subview
id="ca"
left="0" top="jscript:ta.height" width="jscript:view.width" height="240"
horizontalalignment="stretch"
verticalalignment="stretch"
backgroundcolor="wmpprop:view.backgroundcolor"
>
<subview
id="ve"
visible="true"
left="0" top="0" width="jscript:ca.width" height="jscript:ca.height"
horizontalalignment="stretch"
verticalalignment="stretch"
>
<video
id="video"
left="0" top="0" width="wmpprop:ve.width" height="wmpprop:ve.height"
visible="true"
tabstop="false"
stretchToFit="true"
windowless="false"
shrinkToFit="true"/>
<effects
id="effects"
visible="wmpprop:!video.visible"
left="0" top="0" width="wmpprop:ve.width-75" height="wmpprop:ve.height"
visible="false"
tabstop="false"
windowed="true"
currentEffectType="wmpprop:mediacenter.effectType"
currentPreset="wmpprop:mediacenter.effectPreset"/>
<subview
id="albumartsmall"
left="wmpprop:effects.width" top="10" width="75" height="75"
visible="wmpprop:!video.visible"
tabstop="false"
backgroundImage="WMPImage_AlbumArtSmall"
resizebackgroundimage="true"
passthrough="true"/>
<subview
id="albumartlarge"
left="wmpprop:effects.width" top="jscript:albumartsmall.top+albumartsmall.height+2" width="jscript:albumartsmall.width" height="jscript:albumartsmall.height"
visible="wmpprop:!video.visible"
tabstop="false"
backgroundImage="WMPImage_AlbumArtLarge"
resizebackgroundimage="true"
passthrough="true"/>
<effects
id="bars"
left="wmpprop:effects.width" top="wmpprop:ve.height-75" width="75" height="75"
visible="wmpprop:!video.visible"
tabstop="false"
windowed="false"
allowall="false"
>
<bars
displayMode="0"
levelWidth="3"
levelFallbackSpeed="3"
showPeaks="true"
peakHangTime="3"
horizontalSpacing="2"
transparent="true"
fadeMode="1"
levelScale="0.8"
levelColor="lightsteelblue"
peakColor="royalblue"
backgroundColor="wmpprop:ca.backgroundColor" />
</effects>
</subview>
<subview
id="pl"
visible="false"
left="0" top="0" width="jscript:ca.width" height="jscript:ca.height"
horizontalalignment="stretch"
verticalalignment="stretch"
>
<text
id="fileopen"
left="wmpprop:pl.width-21" top="0" width="10" height="10"
tabstop="true"
fontface="MS UI Gothic"
fontsize="8"
justification="center"
value="O"
tooltip="jscript:id"
foregroundcolor="jscript:mediacolor.foregroundcolor"
backgroundcolor="wmpprop:pl.backgroundcolor"
onmouseover="foregroundcolor=hovercolor.foregroundcolor;"
onmouseout="foregroundcolor=mediacolor.foregroundcolor;"
onclick="var u=theme.openDialog('FILE_OPEN','FILES_ALLMEDIA');if(u){player.URL=u;player.controls.play();}"/>
<text
id="playlistclose"
left="wmpprop:pl.width-10" top="0" width="10" height="10"
tabstop="true"
fontface="jscript:fileopen.fontface"
fontsize="8"
fontstyle="bold"
justification="center"
value="X"
tooltip="close"
foregroundcolor="jscript:normalcolor.foregroundcolor"
backgroundcolor="jscript:systembackgroundcolor.backgroundcolor"
onmouseover="backgroundcolor=hoverclosebackgroundcolor.backgroundcolor;"
onmouseout="backgroundcolor=systembackgroundcolor.backgroundcolor;"
onclick="pl.visible=false;ve.visible=true;ve.height=ca.height;"/>
<playlist
id="playlist"
left="0" top="10" width="wmpprop:pl.width" height="wmpprop:pl.height-10"
allowItemEditing="false"
dropDownVisible="true"
columnsVisible="true"
playlistItemsVisible="true"
dropDownList="showAll"
columns="WM/TrackNumber=No.;name=name;duration=time;artist=artist;album=album;filetype=type;filesize=size;bitrate=bps;WM/VideoWidth=width;WM/VideoHeight=height;SourceURL=path"
leftStatus="%count% %duration%"/>
</subview>
</subview>
<!-- BOTTOM AREA -->
<subview
id="ba"
left="0" top="jscript:ta.height+ca.height" width="jscript:view.width" height="14"
horizontalalignment="stretch"
verticalalignment="bottom"
backgroundcolor="wmpprop:view.backgroundcolor"
>
<text
id="play"
left="2" top="0" width="14" height="14"
visible="true"
tabstop="true"
fontface="MS UI Gothic"
fontsize="10"
justification="center"
value="|>"
tooltip="jscript:tooltip=id"
foregroundcolor="jscript:normalcolor.foregroundcolor"
backgroundcolor="wmpprop:ba.backgroundcolor"
onmouseover="foregroundcolor=hovercolor.foregroundcolor;"
onmouseout="foregroundcolor=normalcolor.foregroundcolor;"
onclick="player.controls.play();"/>
<text
id="pause"
left="jscript:play.left" top="jscript:play.top" width="jscript:play.width" height="jscript:play.height"
visible="wmpprop:!play.visible"
tabstop="true"
fontface="jscript:play.fontface"
fontsize="jscript:play.fontsize"
justification="center"
value="||"
tooltip="jscript:tooltip=id"
foregroundcolor="jscript:normalcolor.foregroundcolor"
backgroundcolor="wmpprop:play.backgroundcolor"
onmouseover="foregroundcolor=hovercolor.foregroundcolor;"
onmouseout="foregroundcolor=normalcolor.foregroundcolor;"
onclick="player.controls.pause();"/>
<text
id="stop"
left="16" top="0" width="14" height="14"
tabstop="true"
fontface="jscript:play.fontface"
fontsize="jscript:play.fontsize"
justification="center"
value="□"
tooltip="jscript:tooltip=id"
foregroundcolor="jscript:normalcolor.foregroundcolor"
backgroundcolor="wmpprop:play.backgroundcolor"
onmouseover="foregroundcolor=hovercolor.foregroundcolor;"
onmouseout="foregroundcolor=normalcolor.foregroundcolor;"
onclick="player.controls.stop();"/>
<text
id="previous"
left="32" top="0" width="14" height="14"
tabstop="true"
fontface="jscript:play.fontface"
fontsize="jscript:play.fontsize"
justification="center"
value="《"
tooltip="jscript:tooltip=id"
foregroundcolor="jscript:normalcolor.foregroundcolor"
backgroundcolor="wmpprop:play.backgroundcolor"
onmouseover="foregroundcolor=hovercolor.foregroundcolor;"
onmouseout="foregroundcolor=normalcolor.foregroundcolor;"
onclick="player.controls.previous();"/>
<text
id="next"
tabstop="true"
left="48" top="0" width="14" height="14"
fontface="jscript:play.fontface"
fontsize="jscript:play.fontsize"
justification="center"
value="》"
tooltip="jscript:tooltip=id"
foregroundcolor="jscript:normalcolor.foregroundcolor"
backgroundcolor="wmpprop:play.backgroundcolor"
onmouseover="foregroundcolor=hovercolor.foregroundcolor;"
onmouseout="foregroundcolor=normalcolor.foregroundcolor;"
onclick="player.controls.next();"/>
<slider
id="seek"
left="60" top="1" width="jscript:ba.width-left-146" height="12"
horizontalalignment="stretch"
tabstop="true"
thumbimage=""
backgroundcolor="darkgray"
foregroundcolor="cornflowerblue"
min="0" max="wmpprop:player.currentMedia.duration"
value="wmpprop:player.controls.currentPosition"
onmousemove="var d=player.currentMedia.durationString;var p=player.currentMedia.duration*(event.offsetX+1)/width;var h=Math.floor(p/3600);var m=Math.floor((p-(h*3600))/60);var s=Math.floor(p-(h*3600)-(m*60));tooltip=(d.length>5)?('0'+h).slice(-2)+':':'';tooltip+=('0'+m).slice(-2)+':'+('0'+s).slice(-2)+'/'+d;"
ondragend="player.controls.currentPosition=value;tooltip=player.controls.currentPositionString+'/'+player.currentMedia.durationString;"/>
<text
id="mute"
tabstop="true"
left="jscript:ba.width-146" top="0" width="14" height="14"
horizontalalignment="right"
fontface="jscript:play.fontface"
fontsize="jscript:play.fontsize"
justification="center"
value="￠"
tooltip="jscript:tooltip=id"
foregroundcolor="yellow"
backgroundcolor="wmpprop:ba.backgroundcolor"
onmouseover="foregroundcolor=hovercolor.foregroundcolor;"
onmouseout="foregroundcolor='yellow';"
onclick="player.settings.mute=!player.settings.mute;"/>
<slider
id="volume"
left="jscript:ba.width-132" top="1" width="100" height="12"
horizontalalignment="right"
thumbimage=""
backgroundcolor="lightsteelblue"
foregroundcolor="mediumslateblue"
min="0" max="100"
value="wmpprop:player.settings.volume"
tooltip="wmpprop:value"
onpositionchange="player.settings.volume=value;"/>
<text
id="changeplaylist"
left="jscript:ba.width-30" top="2" width="14" height="14"
horizontalalignment="right"
tabstop="true"
fontface="jscript:play.fontface"
fontsize="jscript:play.fontsize-1"
justification="center"
value="PL"
tooltip="show(or hide) playlist "
foregroundcolor="jscript:mediacolor.foregroundcolor"
backgroundcolor="wmpprop:ba.backgroundcolor"
onmouseover="foregroundcolor=hovercolor.foregroundcolor;"
onmouseout="foregroundcolor=mediacolor.foregroundcolor"
onclick="pl.visible=!pl.visible;ve.visible=!pl.visible;ve.height=(ve.visible)?ca.height:0;"/>
<text
id="resize"
left="jscript:ba.width-14" top="2" width="14" height="14"
horizontalalignment="right"
cursor="sizenwse"
fontface="jscript:play.fontface"
fontsize="jscript:play.fontsize"
fontstyle="bold"
justification="center"
value="⊿"
tooltip="jscript:tooltip=id"
foregroundcolor="jscript:normalcolor.foregroundcolor"
backgroundcolor="wmpprop:ba.backgroundcolor"
onmouseover="foregroundcolor=hovercolor.foregroundcolor;"
onmouseout="foregroundcolor=normalcolor.foregroundcolor;"
onmousedown="view.size('bottomright');"/>
</subview>
<!-- SETTING REPEAT COLOR (visible=false) -->
<text
id="normalcolor"
left="0" top="0" width="0" height="0"
visible="false"
foregroundcolor="white"
/>
<text
id="mediacolor"
left="0" top="0" width="0" height="0"
visible="false"
foregroundcolor="orange"
/>
<text
id="hovercolor"
left="0" top="0" width="0" height="0"
visible="false"
foregroundcolor="lime"
/>
<text
id="systembackgroundcolor"
left="0" top="0" width="0" height="0"
visible="false"
backgroundcolor="#4e454a"
/>
<text
id="hoversystembackgroundcolor"
left="0" top="0" width="0" height="0"
visible="false"
backgroundcolor="blue"
/>
<text
id="hoverclosebackgroundcolor"
left="0" top="0" width="0" height="0"
visible="false"
backgroundcolor="red"
/>
</view>
</theme>
※注記
サンプルコードでは一切画像ファイルを利用していません。(buttonタグやsliderタグ、view.backgroundColor属性等)
ボタンっぽい箇所は全てtextタグを使っています。
たまには画像ファイルを使わないWMPスキン作成の紹介サイトがあってもいいのかなーとか思っているので…
●サンプルコードの動作確認環境
Windows7+WMP12
WindowsXP+WMP11
あわせて公開済みの
sm02(紹介ページ
)や
旧版sm01(紹介ページ)
も使ってみてください。
本ページで紹介したサンプルコードはsm02を①非常にシンプルに②JScriptファイルや画像ファイルを使わないで③複数Viewを開かない一体型スキンとして作ったものです。
- Windows Media Player SDK スキン プログラミング リファレンス
- Windows Media Player SDK コントロール リファレンス
- Skin Programming Reference
- Object Model Reference for Scripting
- MediaType Attribute
- 【WMP】WindowsMediaPlayerスキンスレView2【Skin】
- 実用的なWindows Media Playerスキンを作成
- 簡素なWindows Media Playerスキン作成(ver.1.00)
« 簡素なWindows Media Playerスキン | トップページ | niyoの大掃除術(コツ) »
「パソコン・インターネット」カテゴリの記事
- 実用的なWindows Media Playerスキン sm02(2014.05.01)
- WMPでシークの遅いファイルの対処(2016.11.29)
- 複数のoggファイルをコマンドプロンプトで結合(2016.03.07)
- Windows Media Player skins 作成サンプル(2012.09.20)
- 外部アプリを起動するWMP用 Plugin 「WmpExecApp Plugin」(2015.08.28)
「日記・コラム・つぶやき」カテゴリの記事
- 実用的なWindows Media Playerスキン sm02(2014.05.01)
- Windows Media Player skins 作成サンプル(2012.09.20)
- 普通のホッチキスで冊子の真ん中をとめる(2015.02.09)
- JRの回数券で初めて知ったこと(2015.02.12)
- 文章をチェックする(音声読上げ機能を使う)(2015.02.10)
「趣味」カテゴリの記事
- 実用的なWindows Media Playerスキン sm02(2014.05.01)
- Windows Media Player skins 作成サンプル(2012.09.20)
- 外部アプリを起動するWMP用 Plugin 「WmpExecApp Plugin」(2015.08.28)
- Windows Media Playerメディアライブラリのバックアップ＆リストアツール(2013.07.08)
- 簡素なWindows Media Playerスキン(2012.08.13)
トラックバック
この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/532391/55703920
この記事へのトラックバック一覧です： Windows Media Player skins 作成サンプル:
コメント