Windows Media PlayerのWebページ埋め込み
コントロール非表示・自動再生

unknown

コントロール非表示、自動再生する

<object 
	id="wmp1" 
	width="320" height="240" 
	classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" 
	codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715" 
	standby="Loading MicrosoftR WindowsR Media Player components..." 
	type="application/x-oleobject">
	<param name="FileName" value="/content/media/meta_sample.asx" /><!-- Filename属性は絶対・相対パスどちらでもOK -->
	<param name="AutoStart" value="true" /><!-- 自動再生 -->
	<param name="ShowControls" value="false" /><!-- コントロール非表示 -->
	<!-- 自動再生（autostart="1"）、コントロール非表示（showcontrols="0"） -->
	<embed 
		name="wmp1" type="application/x-mplayer2" 
		pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" 
		src="http://phpjavascriptroom.com/content/media/meta_sample.asx" 
		width="320" height="240" 
		autostart="1" 
		showcontrols="0"><!-- src属性は絶対パス指定 -->
	</embed>
</object>

Windows Media PlayerのWebページ埋め込み
コントロール表示・自動再生しない

unknown

コントロール表示、自動再生しない

<!-- width="285" [ムービーの高さ(240px) + ShowControls(45px)] -->
<object 
	id="wmp2" 
	width="320" height="285" 
	classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" 
	codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715" 
	standby="Loading MicrosoftR WindowsR Media Player components..." 
	type="application/x-oleobject">

	<param name="FileName" value="/content/media/meta_sample.asx" /><!-- Filename属性は絶対・相対パスどちらでもOK -->
	<param name="ShowControls" value="true" /><!-- コントロール表示 -->
	<param name="AutoStart" value="false" /><!-- 自動再生しない -->

	<!-- コントロール表示（showcontrols="1"）、自動再生しない（autostart="0"） -->
	<embed 
		name="wmp2" 
		type="application/x-mplayer2" 
		pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" 
		src="http://phpjavascriptroom.com/content/media/meta_sample.asx" 
		width="320" height="285" 
		autostart="0" 
		showcontrols="1"><!-- src属性は絶対パス指定 -->
	</embed>

</object>

Windows Media PlayerのWebページ埋め込み
表示コントロール指定・自動再生

unknown

コントロール非表示、タイトル・著作権などの動画情報、ステータスバーのみ表示、自動再生する

音声調節、再生ボタン、停止ボタンなど特定のコントロールだけ非表示にしたい場合は、個別にfalseを指定するだけでなく、 一旦、全てのコントロールを非表示に指定します。 ShowControls='false'

次に、表示させたいコントロールに「true」、非表示にするコントロールに「false」を指定していきます。 タイトル・著作権などの「ムービー情報」と「ステータスバー」だけ表示させたいなら、 ShowAudioControls='false'、ShowPositionControls='false'、 ShowDisplay='true'、ShowStatusBar='true'いう風になります。

<!-- width="338" [ムービーの高さ(240px) + ShowDisplay(74px) + ShowStatusBar(24px)] -->
<object 
	id="wmp3"
	width="320" height="338" 
	classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" 
	codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715" 
	standby="Loading MicrosoftR WindowsR Media Player components..." 
	type="application/x-oleobject">

	<param name="FileName" value="/content/media/meta_sample.asx" /><!-- Filename属性は絶対・相対パスどちらでもOK -->
	<param name="AutoStart" value="true" /><!-- 自動再生 -->
	<param name="ShowControls" value="false" /><!-- コントロール非表示 -->
	<param name="ShowPositionControls" value="false" /><!-- 再生・停止ボタン非表示 -->
	<param name="ShowAudioControls" value="false" /><!-- 音声調節スライドバー非表示 -->
	<param name="ShowTracker" value="false" /><!-- 再生位置スライドバー非表示 -->
<!-- 以下3つのコントロールはデフォルトで非表示に設定されているため、表示させる場合は各パラメータにTRUEを指定 -->
	<param name="ShowGotoBar" value="false" /><!-- 関連リンクバー非表示 -->
	<param name="ShowDisplay" value="true" /><!-- タイトル・著作権・作成日付表示 74px -->
	<param name="ShowStatusBar" value="true" /><!-- ステータスバー表示 24px -->

<!-- 自動再生（autostart="1"） -->
<!-- コントロール表示（showcontrols="1"） -->
<!-- 再生・停止ボタン非表示（showpositioncontrols="0"） -->
<!-- 音量調節スライドバー非表示（showaudiocontrols="0"） -->
<!-- 再生位置スライドバー非表示（showtracker="0"） -->
	<embed 
		name="wmp3" 
		type="application/x-mplayer2" 
		pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" 
		src="http://phpjavascriptroom.com/content/media/meta_sample.asx" 
		width="320" height="338" 
		autostart="1" 
		showcontrols="0" 
		showpositioncontrols="0" 
		showaudiocontrols="0" 
		showtracker="0" 
		showstatusbar="1" 
		showgotobar="0" 
		showdisplay="1"><!-- src属性は絶対パス指定 -->
	</embed>

</object>

Windows Media PlayerのWebページ埋め込み
ActiveXコントロール（フォームボタン使用）　※IEのみ

unknown

ActiveXコントロールで制御（フォームボタン使用）

ActiveXコントロールを使って、「再生」、「一時停止」、「停止」、「コントロール表示・非表示切替」を制御することが可能です。 JavaScriptで記述した各処理を、フォームボタンやリンクのonClickイベントで呼び出します。 フォームボタンは、必ずform要素内に記述して下さい。

object要素の「id属性」とembed要素の「name属性」に指定した共通のプレーヤー名（以下の例では「wmp4」）をdocument.プレーヤー名.play()のように指定し、プレーヤーとActiveXコントロールを関連付けます。

<!-- ★IEのみ -->
<script type="text/javascript">
function CtrlShowHide(){ /* コントロール表示切替 */
	if(document.wmp4.showControls==true) {
		document.wmp4.showControls=false;
		document.playerCtrl.controls.value="コントロールを表示";
	}else{
		document.wmp4.showControls=true;
		document.playerCtrl.controls.value="コントロールを隠す"
	}
}
function play() { document.wmp4.play(); }/* 再生 */
function pause() { document.wmp4.pause(); }/* 一時停止 */
function stop() { document.wmp4.stop(); }/* 停止 */
</script>

<br>

<!-- ムービー部分（※伸縮するため、width・height属性は指定しない) -->
<object 
	id="wmp4" 
	classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" 
	codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" 
	standby="Loading Microsoft Windows Media Player components..." 
	type="application/x-oleobject">
	<param name="FileName" value="/content/media/meta_sample.asx" /><!-- Filename属性は絶対・相対パスどちらでもOK -->
	<param name="AutoStart" value="true" />
	<param name="showControls" value="false" />
</object>

<div style="width:320px; text-align:center; margin:10px 0;">
	<!-- ActiveX コントロール部分（必ずform要素内に記述） -->
	<form name="playerCtrl" id="playerCtrl" action="#">
		<input type="button" value="再生" onclick="play()" /><!-- 再生ボタン -->
		<input type="button" value="一時停止" onclick="pause()" /><!-- 一時停止ボタン -->
		<input type="button" value="停止" onclick="stop()" /><!-- 停止ボタン -->
		<input type="button" value="コントロールを表示" name="controls" onclick="CtrlShowHide()" /><!-- コントロール表示切替ボタン -->
	</form>
</div>

Windows Media PlayerのWebページ埋め込み
ActiveXコントロール（画像ボタン使用）　※IEのみ

unknown

ActiveXコントロールで制御（画像ボタン使用）

上の例同様、ActiveXコントロールを使用して、「再生」、「一時停止」、「停止」、「コントロール表示・非表示切替」を制御しています。 フォームボタンではなく、画像ボタンをa要素で挟むことで、プレーヤーの見た目がお洒落になります。 画像ボタンは、必ずform要素内に記述して下さい。

object要素の「id属性」とembed要素の「name属性」に指定した共通のプレーヤー名（以下の例では「wmp5」）をdocument.プレーヤー名.play()のように指定し、プレーヤーとActiveXコントロールを関連付けます。

<!-- ★IEのみ -->
<script type="text/javascript">
function CtrlShowHide(){ /* コントロール表示切替 */
	if(document.wmp5.showControls==true) {
		document.wmp5.showControls=false;
		document.playerCtrl.controls.value="コントロールを表示";
	}else{
		document.wmp5.showControls=true;
		document.playerCtrl.controls.value="コントロールを隠す"
	}
}
function play() { document.wmp5.play(); }/* 再生 */
function pause() { document.wmp5.pause(); }/* 一時停止 */
function stop() { document.wmp5.stop(); }/* 停止 */
</script>

<br>

<!-- ムービー部分（※伸縮するため、width・height属性は指定しない) -->
<object 
	id="wmp5" 
	classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" 
	codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" 
	standby="Loading Microsoft Windows Media Player components..." 
	type="application/x-oleobject">
	<param name="FileName" value="/content/media/meta_sample.asx" /><!-- Filename属性は絶対・相対パスどちらでもOK -->
	<param name="AutoStart" value="true" />
	<param name="showControls" value="false" />
</object>

<div style="width:320px; text-align:center; margin:10px 0;">
	<!-- ActiveX コントロール部分（必ずform要素内に記述） -->
	<form name="playerCtrl" id="playerCtrl" action="#">
		<!-- ActiveXコントロールを使用した画像ボタン -->
		<!-- 再生ボタン -->
		<span onclick="document.wmp5.play()" title="再生"><img src="/content/img/strm/play.png" onmouseover="this.src='/content/img/strm/play_on.png'" onmouseout="this.src='img/strm/play.png'" /></span>
		<!-- 一時停止ボタン -->
		<span onclick="document.wmp5.stop()" title="一時停止"><img src="/content/img/strm/pause.png" onmouseover="this.src='/content/img/strm/pause_on.png'" onmouseout="this.src='img/strm/pause.png'" /></span>
		<!-- 停止ボタン -->
		<span onclick="document.wmp5.stop()" title="停止"><img src="/content/img/strm/stop.png" onmouseover="this.src='/content/img/strm/stop_on.png'" onmouseout="this.src='img/strm/stop.png'" /></span>　
		<!-- コントロール表示切替ボタン -->
		<span onclick="CtrlShowHide()" title="コントロール表示/非表示切替"><img src="/content/img/strm/control.png" onmouseover="this.src='/content/img/strm/control_on.png'" onmouseout="this.src='img/strm/control.png'" /></span>
	</form>
</div>