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!
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();
});
<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
<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
get(0)
, though. I'll give it a shot.. - Adam 2012-04-04 20:53