0

配列とその増分に苦労してきましたが、解決策があると思います。多分。問題は、ビデオが配列で終了すると、私が採用したビデオ再生関数にインクリメントが追加されることです。これは問題にはなりませんが、ビデオをクリックして進むと加算され続けます。

インデックス値が何であれ、クリックした回数に関係なく、クリックしたときにビデオのインデックス値にリセットできるはずであることに気付きました。その後、ビデオが終了すると、ブーム、インクリメントは$("#myVid").index()+1 になります。

私はこれを書く方法を知る必要があります。index= $("#myVid").index()onclickの下に置いてみましたが、うまくいきません。次のように、if関数でラップすることも試みました（これはやり過ぎのようです）。

if (index >= $("#myVid").index()) {
    index= $("#myVid").index()
}

では、インデックス値を再生中のビデオの値に設定するにはどうすればよいでしょうか? また、 noindex = $(this).index();は機能しません。これは、clickの関数の先頭で現在のインデックス値を再表示するだけだからです。

どんな入力にも感謝します〜

編集: リクエストごとに、完全な機能と html...

したがって、htmlは

  <div id="wrapper"><div id="MyT"></div>
    <div class="buttons">
        <div id="content">
          <div class="control">
          <div class="progress"><span class="timeBar"></span></div></div>
            <div class="slider"></div>
            <ul class='thumbs'>
                <li rel='1'><div style="top:0px;"><img src="graphics/filler.png" alt="" width="280" height="128" /></div></li>
                <li rel='2'><div style="top:128px;"><img src="graphics/filler2.png" alt="" width="280" height="128" /></div></li>
                <li rel='3'><div style="top:256px;"><img src="graphics/filler.png" alt="" width="280" height="128" /></div></li>
                <li rel='4'><div style="top:384px;"><img src="graphics/filler2.png" alt="" width="280" height="128" /></div></li>
                <li rel='5'><div style="top:512px;"><img src="graphics/filler.png" alt="" width="280" height="128" /></div></li>
                <li rel='6'><div style="top:640px;"><img src="graphics/filler2.png" alt="" width="280" height="128" /></div></li>
            </ul>
       </div>
    </div>
<div id="bigPic">
 <video id="myVid" alt="" class="normal" type="m4v" showlogo="false" height="768" width="1024"/>
</div>


次に、クリックに関連する完全な機能

$('li', '.thumbs').on('touchstart click', function() {
    index = $(this).index();
    var myVideo = document.getElementById('myVid');
        myVideo.src = videos[index];
        myVideo.load();
        myVideo.play();
        if (index >= $("#myVid").index()) {
            index= $("#myVid").index()
                }

そして次のプレーのために

 $("#myVid").bind("ended", function() {
            $("#bigPic").removeClass("move");
            $("#MyT").fadeIn(250);
            function playArray(ele, array) {
                if (index   >= array.length) {
                    index = 1;
                }
                if ($("#myVid").index() < index+1) {
                    index++;    
                }

                ele.src = array[index];
                ele.load();
                ele.play();
            }
            playArray(document.getElementById("myVid"), videos);
        });
    });

編集：さて、すべての機能を備えたjsfiddleがここにあります

4

1 に答える 1

1

問題の説明がよくわからないので、これは完全な解決策ではありませんが...

での jQuery.index()メソッドの使用は、現在のビデオのインデックスを把握するための適切な方法で$("#myVid").index()はありません。これは、兄弟に対する「myVid」要素のインデックスを常に返すだけだからです (変更されることはありません)。「li」クリックハンドラ内で正しく使用.index()しました。これは、（私が知る限り）その場合、兄弟に関連するインデックスが実際に必要であり、どちらがクリックされたかを伝えるためです。

コードを整理すると、非常に役立つと思います。ビデオ ソースを設定し、それをロードして再生するコードを繰り返さないでください。そのようなものを 1 つの関数に移動し、それを必要とするさまざまな場所からその関数を呼び出します。

var videos = [ /* your array of videos, you don't
                  show how this is defined */ ],
    currentVideo;

function playVideo(videoNumToPlay) {
   var myVideo = document.getElementById('myVid');
   myVideo.src = videos[videoNumToPlay];
   myVideo.load();
   myVideo.play();
   currentVideo = videoNumToPlay;
}

$('li', '.thumbs').on('touchstart click', function() {
    playVideo( $(this).index() );
});

$("#myVid").bind("ended", function() {
   $("#bigPic").removeClass("move");
   $("#MyT").fadeIn(250);       
   playVideo( (currentVideo + 1) % videos.length );
});

ビデオの再生を開始するコード内の唯一の場所が新しいplayVideo()関数内にあり、その関数はvideoNumToPlay再生するビデオのパラメーターを取り、その番号currentVideoを「終了」ハンドラーを使用currentVideoして、インデックスを 1 つ高くします (必要に応じて配列の先頭にラップします)。

また、現在再生中のビデオに対応する li を強調表示するためにいくつかのクラスを設定する必要がある場合、またはplayVideo()関数を使用してそれを行います。（明らかに、表示されていない追加のコードがありますが、その他のコードで何をしているのか正確には推測できません。）

于 2012-05-23T03:55:21.993 に答える