关于使用jQuery操纵视频HTML5视频的几个问题

时间:2012-04-03 23:01:52

标签: jquery video

我有一个人们可以观看视频的页面。他们选择他们想看的视频购买点击元素并开始播放视频。视频使用<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,我希望让其中两个工作。我可以从那里得到它。

和平!

1 个答案:

答案 0 :(得分:1)

这是一个我作为jsfiddle发布的解决方案供你玩:http://jsfiddle.net/trpeters1/EyZdy/11/

这里有更好的jsfiddles,可以容纳任意数量的视频: http://jsfiddle.net/trpeters1/EyZdy/23/(视频嵌套在点击btn内,使用find())

http://jsfiddle.net/trpeters1/EyZdy/28/(视频未嵌套在点击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();   
});