0

サムネイルをクリックしてからビデオを再生することで機能するビデオスライダーがあります。問題は、ビデオが表示されるだけでなく、フェードインするように関数を作成しようとしていることです。普通にできますが、サムネイル/動画がリスト形式なので、設定方法がわかりにくいです。体の部分はこんな感じ

    <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();   
       }
4

2 に答える 2

1

さて、これが私がそれをする方法です！

何をしているのかわかりませんが、ビデオ要素を1つだけ使用し、必要に応じて変更します。一度に複数のビデオを再生する場合を除いて、ビデオごとに個別の要素は必要ありません。

<div id="wrapper">
    <div id="bigPic">
        <video id="myVid" alt="" height="240" width="360" 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" /></li>
                <li rel='2'><img src="graphics/filler2.png" alt="" width="281" height="128" /></li>
                <li rel='3'><img src="graphics/filler.png" alt="" width="281" height="128" /></li>
                <li rel='4'><img src="graphics/filler2.png" alt="" width="281" height="128" /></li>
                <li rel='5'><img src="graphics/filler.png" alt="" width="281" height="128" /></li>
                <li rel='6'><img src="graphics/filler2.png" alt="" width="281" height="128" /></li>
            </ul>
       </div>
    </div>
</div>

また、onclick関数を削除し、代わりにjQueryを使用して次のようにします。

$('li', '.thumbs').on('click', function() {....});

必要なのは、ビデオ要素をフェードしてソースを置き換える機能だけです。動的なものを選びます。できれば、ビデオなどに名前を付け、video1.mp4要素インデックスをvideo2.mp4使用しliてビデオを選択しますが、次のリンクを配置することもできます。ビデオは配列内にあり、次のようなインデックスを使用します。

var numb = $(this).index(),
    videos = ['images/clip0.mp4', 'images/clip1.mp4', 'images/clip2.mp4'],
    thisVideo = videos[numb];

全体として、次のようになります。

$('li', '.thumbs').on('click', function() {
    var numb = $(this).index(),
        videos = ['images/clip0.mp4', 'images/clip1.mp4', 'images/clip2.mp4'],
        myVideo = document.getElementById('myVid');
    $(myVideo).animate({opacity : 0}, 1500, function() {
        myVideo.src = videos[numb];
        myVideo.load();
        myVideo.play();
        $(myVideo).animate({opacity : 1}, 1500);
    });
});

DOMでtagNamesを検索するよりも高速で簡単なため、動画要素にIDを追加しました。

これがどのように機能するかを示すためのフィドルです。まだ少し助けが必要かもしれませんが、少なくともいくつかの種類のデモがあります！</ p>

于 2012-05-04T08:00:46.467 に答える
0

ビデオの上にしっかりしたdivを配置し、フェードアウトすることができます。オーディオは最初からフルボリュームになります-おそらく効果を混乱させるでしょう。

于 2012-05-04T07:07:14.990 に答える