ビデオ再生、画像拡大およびHTML表示の設置方法

<script type="text/javascript" src="jwplayer.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="tabcontent.js"></script>
<script type="text/javascript" src="common.js"></script>
<link rel="stylesheet" type="text/css" href="common.css">

■ビデオ再生指定(Jwplayer)
<a name="video"></a>

■ビデオ再生指定(Jwplayer)<br>
<center><div id="jwplayer"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div></center>
<script type="text/javascript">
var so = new SWFObject("player.swf","ply","@","A","9","#000000");
so.addParam("allowfullscreen","true");
so.addParam("allowscriptaccess","always");
so.addParam("wmode","opaque");
so.addVariable("autostart","flase");
so.addVariable("file","B.flv");
so.addVariable("image","Bl.jpg");
so.addVariable("skin","C");
so.addVariable("controlbar","over");
so.write("jwplayer");
</script>

<div id="countrytabs" class="shadetabs">
<ul>
<li><a href="#" rel="country1" onmouseover="countries.expandit(0)" hidefocus=true class="selected">Type1 Video Button</a></li>
<li><a href="#" rel="country2" onmouseover="countries.expandit(1)" hidefocus=true>Type2 Video Button</a></li>
</ul>
<br style="clear: left">
</div>

<div class="tabarea">
<div id="country1" class="tabcontent">

<ul id="videoimg">
<li style="background-image: url(Bs.jpg)"><a href="#video" onclick="Jwplayer('B','@','A');" hidefocus=true onmouseover="VisibleStr('D')" onmouseout="HiddenStr('D')"><img src="playButton.png" style="visibility : hidden; position:relative; top:17px; left:29px;" align="left" id="D"></a></li>
<li style="background-image: url(Bs.jpg)"><a href="#video" onclick="Jwplayer('B','@','A');" hidefocus=true onmouseover="VisibleStr('D')" onmouseout="HiddenStr('D')"><img src="playButton.png" style="visibility : hidden; position:relative; top:17px; left:29px;" align="left" id="D"></a></li>
<li style="background-image: url(novideo.jpg)"><span></span></li>
</ul>
<br style="clear: both;">

</div>
<div id="country2" class="tabcontent">

<ul id="videoimg2">
<li style="background-image: url(Bs.jpg);" id="E"><a href="#video" onclick="Jwplayer('B','@','A');" hidefocus=true onmouseover="VisibleStr('D'); DecoratesOver('E');" onmouseout="HiddenStr('D'); DecoratesOut('E');"><img src="playButton.png" style="visibility : hidden; position:relative; top:17px; left:29px;" align="left" id="D"><div>タイトル<br>コメント</div></a></li>
<li style="background-image: url(Bs.jpg);" id="E"><a href="#video" onclick="Jwplayer('B','@','A');" hidefocus=true onmouseover="VisibleStr('D'); DecoratesOver('E');" onmouseout="HiddenStr('D'); DecoratesOut('E');"><img src="playButton.png" style="visibility : hidden; position:relative; top:17px; left:29px;" align="left" id="D"><div>タイトル<br>コメント</div></a></li>
<li style="background-image: url(novideo.jpg)" id="E"><span></span></li>
</ul>
<br style="clear: both;">

</div>
</div>
<script type="text/javascript"> 
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link")
countries.init()
</script>

@ビデオの横幅を指定
Aビデオの縦幅を指定
Bビデオ名を指定
Cスキン名を指定(Jwplayerサイトから入手してください)
Dビデオ名任意のIDを指定(プレイボタン表示用)
Eビデオ名任意のIDを指定(背景色変更用)

Get the Flash Player to see this player.




<a name="video"></a>

■ビデオ再生指定(Jwplayer)<br>
<center><div id="jwplayer"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div></center>
<script type="text/javascript">
var so = new SWFObject("player.swf","ply","512","384","9","#000000");
so.addParam("allowfullscreen","true");
so.addParam("allowscriptaccess","always");
so.addParam("wmode","opaque");
so.addVariable("autostart","flase");
so.addVariable("file","video01.flv");
so.addVariable("image","video01l.jpg");
so.addVariable("skin","dangdang.swf");
so.addVariable("controlbar","over");
so.write("jwplayer");
</script>

<div id="countrytabs" class="shadetabs">
<ul>
<li><a href="#" rel="country1" onmouseover="countries.expandit(0)" hidefocus=true class="selected">Type1 Video Button</a></li>
<li><a href="#" rel="country2" onmouseover="countries.expandit(1)" hidefocus=true>Type2 Video Button</a></li>
</ul>
<br style="clear: left">
</div>

<div class="tabarea">
<div id="country1" class="tabcontent">

<ul id="videoimg">
<li style="background-image: url(video01s.jpg)"><a href="#video" onclick="Jwplayer('video01','320','240');" hidefocus=true onmouseover="VisibleStr('video01')" onmouseout="HiddenStr('video01')"><img src="playButton.png" style="visibility : hidden; position:relative; top:17px; left:29px;" align="left" id="video01"></a></li>
<li style="background-image: url(video01s.jpg)"><a href="#video" onclick="Jwplayer('video01','','');" hidefocus=true onmouseover="VisibleStr('video02')" onmouseout="HiddenStr('video02')"><img src="playButton.png" style="visibility : hidden; position:relative; top:17px; left:29px;" align="left" id="video02"></a></li>
<li style="background-image: url(novideo.jpg)"><span></span></li>
</ul>
<br style="clear: both;">

</div>
<div id="country2" class="tabcontent">

<ul id="videoimg2">
<li style="background-image: url(video01s.jpg);" id="video04bg"><a href="#video" onclick="Jwplayer('video01','320','240');" hidefocus=true onmouseover="VisibleStr('video04ply'); DecoratesOver('video04bg');" onmouseout="HiddenStr('video04ply'); DecoratesOut('video04bg');"><img src="playButton.png" style="visibility : hidden; position:relative; top:17px; left:29px;" align="left" id="video04ply"><div>タイトル<br>コメント</div></a></li>
<li style="background-image: url(video01s.jpg);" id="video05bg"><a href="#video" onclick="Jwplayer('video01','','');" hidefocus=true onmouseover="VisibleStr('video05ply'); DecoratesOver('video05bg');" onmouseout="HiddenStr('video05ply'); DecoratesOut('video05bg');"><img src="playButton.png" style="visibility : hidden; position:relative; top:17px; left:29px;" align="left" id="video05ply"><div>タイトル<br>コメント</div></a></li>
<li style="background-image: url(novideo.jpg)" id="video06bg"><span></span></li>
</ul>
<br style="clear: both;">

</div>
</div>
<script type="text/javascript"> 
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link")
countries.init()
</script>

※JW Player(jwplayer.js/swfobject.js/player.swf/yt.swf)などは、こちらから入手してください。
ダウンロードページにチェックボックスが2つありますが、2つ目の「Include Viral, a video sharing plugin」このチェックを外してからダウンロードしてみてください。
1つ目の「Keep me informed of news, offers & updates 」のチェックも外してよいと思います。
※スキン(dangdang.swf)などは、、こちらから入手してください。
※Tab Content Script(tabcontent.js)は、、こちらから入手してください。


■画像拡大表示指定
<a href="javascript:pview('@','A')">B</a>
@画像を指定
A画像の名称を指定、または、未指定
B名称等

※拡大画像をクリックするとウィンドウをクローズします。
※「X」キーを押下時、ウィンドウをクローズします。
※画像サイズは、640x480を推奨!

<a href="javascript:pview('izariuo.jpg')"><img src="izariuos.jpg" width="100" height="75" border="0"></a>
<a href="javascript:pview('izariuo.jpg','イザリウオ')"><img src="izariuos.jpg" width="100" height="75" border="0"></a>


■HTML指定
<a href="javascript:pop('@','A','B')">C</a>
@HTMLを指定
AHTMLの横サイズを指定
BHTMLの縦サイズを指定
C名称等

※「X」キーを押下時、ウィンドウをクローズします。

HTML指定例
<a href="javascript:pop('video.html','400','400')">HTML指定例</a>