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 的其余部分，我希望其中两个能够工作。我可以从那里得到它。

和平！

4

1 回答 1

1

这是我作为 jsfiddle 发布的一个解决方案，供您使用：http: //jsfiddle.net/trpeters1/EyZdy/11/

这里有更好的 jsfiddles，可以容纳任意数量的视频：http: //jsfiddle.net/trpeters1/EyZdy/23/ （视频嵌套在 click btn 中，使用 find()）

http://jsfiddle.net/trpeters1/EyZdy/28/ （视频没有嵌套在click btn中，匹配数据属性）

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 回答