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