3

私はいくつかのビデオのページを持っています。サムネイルをクリックして、各ビデオを再生できます。問題は、2 つ以上のビデオの場合、3 番目のサムネイルをクリックしても 2 番目のビデオが一時停止しないため、2 つのビデオが同時に再生されることです。また、各ビデオの表示を切り替えるためにを使用しfadeOut()ていますが、これはビデオの数に関係なく正常に機能します。get(0)したがって、問題はコードの部分にあると思います。

ここに問題を表示する jsfiddle があります: http://jsfiddle.net/trpeters1/EyZdy/28/

さらに、問題を明確にするためのより詳細なコード ブロックを次に示します。

$(function(){
      $('#video_1,#video_2,#video_3,#video_4,#video_5,#video_6').hide();

      $('.icon_1').click(function(){
            $('#video_2,#video_3,#video_4,#video_5,#video_6').fadeOut(function(){
                  $('#video_1').fadeIn();
            $('.video_2,.video_3,.video_4,.video_5,.video_6').get(0).pause();
            $('.video_2,.video_3,.video_4,.video_5,.video_6').get(0).currentTime = 0;
            $('.video_1').get(0).play();
            });
      });


      $('.icon_2').click(function(){
            $('#video_1,#video_3,#video_4,#video_5,#video_6').fadeOut(function(){
                  $('#video_2').fadeIn();
            $('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).pause();
            $('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).currentTime = 0;
            $('.video_2').get(0).play();
            });
      });

      $('.icon_3').click(function(){
            $('#video_1,#video_2,#video_4,#video_5,#video_6').fadeOut(function(){
                  $('#video_3').fadeIn();
            $('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).pause();
            $('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).currentTime = 0;
            $('.video_3').get(0).play();
            });
      });
});

そしてhtml：

<div id="video_1">
<div id="mediaplayer">cadillac</div>
    <video class="video_1" width="100%" height="100%" controls="controls">
        <source src="videos/cadillac_x264.mp4" type="video/mp4" />
    <object data="videos/cadillac_x264.mp4" width="100%" height="100%">
</object> 
</video>
</div>

<div id="video_2">
<div id="mediaplayer2">nike</div>
    <video class="video_2" width="100%" height="100%" controls="controls">
    <source src="videos/Nike_Pretty - Computer_x264.mp4" type="video/mp4" />
<object data="videos/Nike_Pretty - Computer_x264.mp4" width="100%" height="100%">
</object> 
</video>
</div>

<div id="video_3">
<div id="mediaplayer3">russian standard</div>
    <video class="video_3" width="100%" height="100%" controls="controls">
    <source src="videos/Russian_Standard.mp4" type="video/mp4" />
<object data="videos/Russian_Standard.mp4" width="100%" height="100%">
</object> 
</video>
</div>
4

3 に答える 3

11

次の場合:

$('.video_2,.video_3,.video_4,.video_5,.video_6').get(0)

「get(0)」は、セレクターに一致する最初の要素を返します。この場合は、「.video_2」に一致する最初の要素のみです。残りのビデオは無視されます。選択したすべての要素に対してアクションを実行するには、jQuery の「each()」メソッドを確認してください。また、次のようなことを行うことで、コードをより一般的なアプローチに簡素化できます。

<a href="#" class="video-thumbnail" data-video-id="video-1">Video 1</a>
<a href="#" class="video-thumbnail" data-video-id="video-2">Video 2</a>

<video id="video-1"> ... </video>
<video id="video-2"> ... </video>

そして、次のようにして JS を接続します。

$('.video-thumbnail').on('click', function () {
    // Just go ahead and pause/reset all the video elements
    $('video').each(function () {
        this.pause();
        this.currentTime = 0;
    });

    $('#' + $(this).data('video-id')).get(0).play();
});

頭からこれを入力したところですが、うまくいけば、正しい方向に進むでしょう。

于 2012-04-04T21:37:12.907 に答える
3

P1aincloth3sM4nに感謝します。すべてのビデオをリセットし、より一般化可能なソリューションを作成することについてあなたが言ったことに従いました。興味のある人は、次の動作中のjsfiddleを参照してください。

于 2012-04-04T21:46:18.303 に答える
0

JQUERY を使用して、ページ上で 1 つの HTML5 ビデオ要素のみを再生する簡単なソリューション:

$(function() {
$("video").each(function() {
    this.pauseOthers = function(event) {
        $('video').addClass('stopvideo');
        $(this).removeClass('stopvideo');
        $('.stopvideo').each(function() {
            this.pause();
        });
    };
    this.addEventListener("play", this.pauseOthers.bind(this), false);
});
});
于 2015-10-30T05:34:04.513 に答える