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)
- VLCメディアプレイヤーの動画ファイル名の日本語化(2015.04.24)
- Win10でhtaファイルの関連づけ(2017.09.08)
- 私がRyzen 7 1700を購入した理由(2017.09.22)
- Core 2Quad から Ryzen 7に変えて良かったこと悪かったこと(2017.08.31)
「日記・コラム・つぶやき」カテゴリの記事
- 実用的なWindows Media Playerスキン sm02(2014.05.01)
- amazon.comで価格変動をトレースできる「Amazon Price Tracker」(2017.08.06)
- Windows Media Player skins 作成サンプル(2012.09.20)
- 普通のホッチキスで冊子の真ん中をとめる(2015.02.09)
- JRの回数券で初めて知ったこと(2015.02.12)
「趣味」カテゴリの記事
- 実用的な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 作成サンプル:
コメント