最近のトラックバック

2017年10月
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        

Google AdSense2

« 簡素なWindows Media Playerスキン | トップページ | niyoの大掃除術(コツ) »

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スキン | トップページ | niyoの大掃除術(コツ) »

パソコン・インターネット」カテゴリの記事

日記・コラム・つぶやき」カテゴリの記事

趣味」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/532391/55703920

この記事へのトラックバック一覧です: Windows Media Player skins 作成サンプル:

« 簡素なWindows Media Playerスキン | トップページ | niyoの大掃除術(コツ) »

Google AdSense


  • ---

Amazon ウィジェット

  • ウィジェット

@niyo_naのツイート

無料ブログはココログ

Google Analytics