A couple of questions regarding using jQuery to manipulate video HTML5 video

Go To StackoverFlow.com

4

I have a page where people can view videos. They choose what video they want to see buy clicking an element and the video starts. The videos use the <video> tag. If someone starts watching a video and then choose another one, the old video continues. I want the video they were watching to stop and reset to 0. Here's what I've got for 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;
    });

And for 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>

So, I think you see what I'm trying to do: When the user clicks on any .icon_# but the one they are viewing, it pauses and resets the one they were viewing to 0 and then plays the video they clicked on.

The problem is that it doesn't work. The first video I click just plays through.

BTW, I have the rest of the jQuery written, I'm looking to get two of them to work. I can get it from there.

Peace!

2012-04-03 23:01
by Adam


1

here is a solution which i posted as a jsfiddle for you to play around with: http://jsfiddle.net/trpeters1/EyZdy/11/

here's even better jsfiddles which can accomodate any number of videos: http://jsfiddle.net/trpeters1/EyZdy/23/ (video nested inside click btn, using find())

http://jsfiddle.net/trpeters1/EyZdy/28/ (video isn't nested inside click btn, matching data attribute)

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">

​ ​ and here's the 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-03 23:27
by tim peterson
when I added a third element, it broke. Thought I had it. Posted another question with your solution, but with an added block of code. It broke. You're still a champion, though - Adam 2012-04-04 02:34
hi Adam, i've simplified the JS and made it useful for any number of videos. Please see the updated answer and jsfiddle. However, there is still one problem I can't understand yet. The pausing works for the switch between video 1 and 2, but if click on the 3rd video then the 2nd is still playing. I think this has to do with the get(0) indexing because the fadeOut() on this 3rd video works - tim peterson 2012-04-04 11:04
Unfortunately, that won't do the trick. The clickable element is away from the video <div>. For giggles, the site is adambombdesign.com/enginethree if you'd like to take a look. I won't presume to encroach on any more of your much-appreciated time, but you can see what my goal is - Adam 2012-04-04 11:56
ok, see the updated answer above, still has same 3rd video issue though, sorry, off to work now, will look at later today... - tim peterson 2012-04-04 12:38
hey Adam, are you in better shape now - tim peterson 2012-04-04 20:29
No, pal. I've been trying some things, but to no avail. I can't get why, but the third video continues to play after the first click. It all looks good, but no joy. And, apparently, no one else has joined the fray. Any ideas? I mean, I think this is could end up being a great solution, even for a plugin - Adam 2012-04-04 20:45
yeah, this would be useful for what i'm doing too. I'm just getting started with the javascript commands to control the <video> tag. I think it'd be helpful to post a 2nd question asking about the get(0) and why the 3rd click only applies to the fadeOut() and not the pause() function. Then you'd get more experienced jQuery people chiming in. People tend to see new questions right away and old questions such as this one which already have answers don't tend to get new people chiming in. Just reference the original question so people can easily play around with the jsfiddle - tim peterson 2012-04-04 20:50
I've already got a 2d question up, but no love there. Not with the get(0), though. I'll give it a shot.. - Adam 2012-04-04 20:53
Just make sure to give it a clear title and give it good tags using popular buzzwords: jquery, javascript, html5, video. Though don't be too slangy or longwinded as "good" programmers like to get to the point. Can you include a link to your 2nd question in these comments for me to see? Perhaps, we can just edit that. It sounds like you might not be attracting people to your question well enough. I ask alot of questions and get great answers within an hour pretty much every time - tim peterson 2012-04-04 20:58
let us continue this discussion in chatAdam 2012-04-04 21:01