jquery - 关于使用 jQuery 操作视频 HTML5 视频的几个问题

Question

我有一个页面，人们可以在其中观看视频。他们选择他们想看的视频，点击一个元素，视频开始播放。视频使用 <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 的其余部分，我正在寻找让其中的两个工作。我可以从那里得到它。

和平!

Answer 1

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

这里有更好的 jsfiddles，它可以容纳任意数量的视频: http://jsfiddle.net/trpeters1/EyZdy/23/ (视频嵌套在 click btn 中，使用 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();   
});