4

人々がビデオを見ることができるページがあります。要素をクリックして購入したい動画を選択すると、動画が始まります。動画は<video>タグを使用しています。誰かがビデオの視聴を開始してから別のビデオを選択すると、古いビデオが続きます。彼らが見ていたビデオを停止して 0 にリセットしたいのですが、jQuery 用に用意したものは次のとおりです。

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

          $('.icon_2,.icon_3,.icon_4,.icon_5,.icon_6').click(function(){
                $('#video_1').get(0).pause();
                $('#video_1').get(0).currentTime = 0;
            });

          $('.icon_2').click(function(){
                $('#video_1,#video_3,#video_4,#video_5,#video_6').fadeOut(function(){
                $('#video_2').fadeIn();
                });
          });

          $('.icon_1,.icon_3,.icon_4,.icon_5,.icon_6').click(function(){
            $('#video_2').get(0).pause();
            $('#video_2').get(0).currentTime = 0;
    });

そしてhtmlの場合：

<div id="video_1">
<div id="mediaplayer">cadillac</div>
    <video class="video_1" width="100%" height="100%" autoplay="autoplay" 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%" autoplay="autoplay" 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>

だから、私がやろうとしていることがわかると思います: ユーザーが表示しているもの以外をクリックすると、一時停止し、表示してい.icon_#たものを 0 にリセットしてから、クリックしたビデオを再生します。

問題は、それが機能しないことです。最初にクリックしたビデオがそのまま再生されます。

ところで、私は残りの jQuery を作成しました。そのうちの 2 つを機能させたいと考えています。私はそこからそれを得ることができます。

平和！

4

1 に答える 1

1

これは、私がjsfiddleとして投稿したソリューションです。

これは、任意の数のビデオに対応できるさらに優れたjsfiddlesです：http://jsfiddle.net/trpeters1/EyZdy/23/ （ find（）を使用してクリックボタン内にネストされたビデオ）

http://jsfiddle.net/trpeters1/EyZdy/28/ (ビデオはクリックボタン内にネストされておらず、データ属性が一致しています)

here's the HTML:

<div class="icon" data-id="1" >cadillac</div>
<div class="icon" data-id="2">nike</div>
<div class="icon" data-id="3">cheerios</div>

<div class="video" data-id="1" >
<video class="video" width="50%" height="50%"  controls="controls" poster="http://www.birds.com/wp-content/uploads/home/bird.jpg" >    


<div class="video" data-id="2" >
<video class="video" width="50%" height="50%"  controls="controls" poster="http://www.logobird.com/wp-content/uploads/2011/03/new-google-chrome-logo.jpg">


<div class="video" data-id="3" >
<video class="video" width="50%" height="50%"  controls="controls" poster="http://cheerioscoupons.info/wp-content/uploads/_Cheerios-Coupons-1-300x283.jpg">

JS は次のとおりです。

$('div.video').hide();

$('.icon').click(function(){
  var id=$(this).data('id'),
    thisDiv=$("div.video[data-id='" + id +"']"),
    thisVideo=$("div.video[data-id='" + id +"']").find('video');

   $('div.video').not(thisDiv).fadeOut();
   $('video').not(thisVideo).get(0).pause();
   $('video').not(thisVideo).get(0).currentTime = 0;
   thisDiv.fadeIn();      
   thisVideo.get(0).play();   
});
于 2012-04-03T23:27:48.983 に答える