サムネイルをクリックしてからビデオを再生することで機能するビデオスライダーがあります。問題は、ビデオが表示されるだけでなく、フェードインするように関数を作成しようとしていることです。普通にできますが、サムネイル/動画がリスト形式なので、設定方法がわかりにくいです。体の部分はこんな感じ
<div id="wrapper">
<div id="bigPic">
<video alt="" height="786" width="1024" style="margin-left:-8px; margin-top:-16px;"/>
<video alt="" height="786" width="1024" style="margin-left:-8px; margin-top:-16px;"/>
<video alt="" height="786" width="1024" style="margin-left:-8px; margin-top:-16px;"/>
<video alt="" height="786" width="1024" style="margin-left:-8px; margin-top:-16px;"/>
<video alt="" height="786" width="1024" style="margin-left:-8px; margin-top:-16px;"/>
<video alt="" height="786" width="1024" style="margin-left:-8px; margin-top:-16px;"/>
</div>
<div class="buttons">
<div id="content">
<ul class='thumbs'>
<li rel='1'><img src="graphics/filler.png" alt="" width="281" height="128" onClick="javascript:playVideo1();"/></li>
<li rel='2'><img src="graphics/filler2.png" alt="" width="281" height="128" onClick="javascript:playVideo2();"/></li>
<li rel='3'><img src="graphics/filler.png" alt="" width="281" height="128" onClick="javascript:playVideo3();"/></li>
<li rel='4'><img src="graphics/filler2.png" alt="" width="281" height="128" onClick="javascript:playVideo4();"/></li>
<li rel='5'><img src="graphics/filler.png" alt="" width="281" height="128" onClick="javascript:playVideo5();"/></li>
<li rel='6'><img src="graphics/filler2.png" alt="" width="281" height="128" onClick="javascript:playVideo6();"/></li>
</ul>
</div>
</div>
</div>
再生ビデオ(少なくとも最初のもの)の機能は次のとおりです。
function playVideo1() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = 'images/clip2.mp4'
myVideo.load();
myVideo.play();
myVideo.easeIn();
}