0

ビデオのサムネイルに対応する一連の画像があります。ユーザーがサムをクリックすると、ブラウザがロードされます。これは簡単ですが、次のビデオを順番に自動的にキューアップできるように、どのサムがクリックされたかを追跡する必要があります。

私の最初の考えは、次のようなことをすることでした(非常に単純化された例):

<div class="thumbs">
<img id="vt_0" src="thumbxxx00.jpg" />
<img id="vt_1" src="thumbxxx01.jpg" />
<img id="vt_2" src="thumbxxx02.jpg" />
<img id="vt_3" src="thumbxxx03.jpg" />
<img id="vt_4" src="thumbxxx04.jpg" />
<img id="vt_5" src="thumbxxx05.jpg" />
<img id="vt_6" src="thumbxxx06.jpg" />
</div>

<script type="text/javascript">
var videos = [ "xxx00", "xxx01", "xxx02", "xxx03", "xxx04", "xxx05", "xxx06" ];
var video_index = null;

function playVideo(id) {
// play video then call "onVideoFinish()" when video ends. 

}

function onVideoFinish() {
    video_index = (video_index = 6) ? video_index : video_index+1;
    playVideo(videos[video_index]);
}

    $j("div.thumbnail img").live("click", function (e) {
      e.preventDefault();
      var selected_id = $(this).attr("id").split("_")[1];
      video_index = selected_id;
      playvideo( videos[video_index] );
    });

</script>

一見これで問題ないように見えますが、特にオブジェクト コンテキスト内からこれらすべてのメソッドを実装するので、これが最善の/最も洗練されたソリューションであるかどうかはわかりません。

4

3 に答える 3

1

これは私がそれを行う方法です。この場合に必要な唯一のグローバルは currentPlayOrder です。これは、設定または構成モデルの一部として誰かに保存される可能性があります。

まずはHTML。関連するサムネイルの rel 属性にビデオ ソースを移動しました。あなたのアプリケーションがサムネイルを生成していると仮定します。その場合、サムネイル HTML を生成するものはすべて関連するビデオ ソースを認識できるため、これは適切な方法です。

<div class="thumbs">
    <img id="vt_0" src="http://stackoverflow.com/content/img/so/logo.png" rel="videoA"/>
    <img id="vt_1" src="http://serverfault.com/content/img/sf/logo.png"   rel="videoB"/>
    <img id="vt_2" src="http://stackoverflow.com/content/img/so/logo.png" rel="videoC"/>
    <img id="vt_3" src="http://serverfault.com/content/img/sf/logo.png"   rel="videoD"/>
    <img id="vt_4" src="http://stackoverflow.com/content/img/so/logo.png" rel="videoE"/>
    <img id="vt_5" src="http://serverfault.com/content/img/sf/logo.png"   rel="videoF"/>
    <img id="vt_6" src="http://stackoverflow.com/content/img/so/logo.png" rel="videoG"/>
</div>

今JS。再生順序を決定するためにpreviousSiblingとを使用していることに注意してください。nextSibling

<script type="text/javascript">

var PLAY_ORDER_BACKWARD = "previousSibling";
var PLAY_ORDER_FORWARD  = "nextSibling";

var currentPlayOrder = PLAY_ORDER_FORWARD;

$(document).ready(function() {
    $(".thumbs img").each(function(i, node) {
        $(node).click(function() {
            playVideo(this.getAttribute("rel"), this);
        });
    });
});

var playVideo = function(source, thumbNode) {
    console.log("Play video %s", source);
    onVideoFinish(thumbNode);
    // If your video play accepts a callback, you may need to pass it as
    // function() { onVideoFinish(thumbNode); }
}

var onVideoFinish = function(thumbNode) {
    // Get the next img node (if any) in the appropriate direction
    while ( thumbNode = thumbNode[currentPlayOrder] ) {
        if ( thumbNode.tagName == "IMG" ) { break; }
    }

    // If an img node exists and it has the rel (video source) attribute
    if ( thumbNode && thumbNode.getAttribute("rel") ) {
        playVideo(thumbNode.getAttribute("rel"), thumbNode);
    }
    // Otherwise, assume that there are no more thumbs/videos in this direction
    else {
        console.log("No more videos to play");
    }
}
</script>

それが役立つことを願っています。

于 2009-07-17T02:14:28.070 に答える
0

これが私がそれを行う方法です。

ビデオ名を配列内に格納する代わりに、サムネイルと共にビデオ名を格納してみませんか? クラス属性を使用して、ビデオの名前を保存できます。

このアプローチを取ると、物事は単純になります。

<div class="thumbs">
<img id="vt_0" src="thumbxxx00.jpg" class="xxx00"/>
<img id="vt_1" src="thumbxxx01.jpg" class="xxx01"/>
<img id="vt_2" src="thumbxxx02.jpg" class="xxx02"/>
<img id="vt_3" src="thumbxxx03.jpg" class="xxx03"/>
<img id="vt_4" src="thumbxxx04.jpg" class="xxx04"/>
<img id="vt_5" src="thumbxxx05.jpg" class="xxx05"/>
<img id="vt_6" src="thumbxxx06.jpg" class="xxx06"/>
</div>

<script type="text/javascript">

    function setupVideoPlayer(order)
    {
        //lastThumb won't be accessible from outside of setupVideoPlayer 
        //function.
        var lastThumb = null;
        var imageSelector = 'div.thumbs img';

        function playVideo(video)
        {
            //Play the video.
            onVideoFinish();
        }

        function onVideoFinish()
        {
            //If order is 'ascending', we will go to the 'next'
            //image, otherwise we will go to 'previous' image.
            var method = order == 'asc' ? 'next' : 'prev';

            //When user is at the end, we need to reset it either at the 
            //first image (for ascending) or the last (for descending). 
            var resetIndex = order == 'asc' ? 0 : $(imageSelector).length - 1;

            //When video has finished playing, we will try to 
            //find the next/prev (depending upon order) sibling of 'lastThumb', 

            //If we can not find any sibling, it means we are at the
            //last/first thumbnail and we will go back and fetch the first/last
            //image. 

            //Also, instead of calling the playVideo method, we will
            //fire the click event of thumbnail. This way, if you decide to
            //do something in future (say playing an ad before the video)
            //you only need to do it in your click handler.            

            if($(lastThumb)[method]().length == 0)
                $(imageSelector).get(resetIndex).click();
            else
                $(lastThumb)[method]().click(); 

        }

        $j(imageSelector)
            .click(
                function()
                {
                    //on click, we store the reference to the thumbnail which was 
                    //clicked.
                    lastThumb = this;

                    //We get the name of the video from the class attribute
                    //and play the video. 
                    playVideo($(this).attr('class'));
                }
              );
    }

    $(document).ready(
        function() { setupVideoPlayer('asc'); }
    );

</script>

上記のコードには、HTML を変更できるという利点があり、それらのビデオが自動的に再生されます。

于 2009-07-17T00:34:36.453 に答える
-2

画像をアンカー タグでラップし、次のように onClick メソッドを使用できます。

<a href="java script:;" onClick="playVideo(0)"><img src="thumbxxx00.jpg" /></a>
<a href="java script:;" onClick="playVideo(1)"><img src="thumbxxx01.jpg" /></a>
...
于 2009-07-17T00:35:03.520 に答える