当选择器悬停时从一开始就播放特定的视频时，jQuery
当选择器悬停时从一开始就播放特定的视频时，jQuery
提问于 2016-04-15 14:41:55
我最近遇到了一些问题，这是很好的，但我遇到了另一个问题。
当您在相关选择器(按钮)上悬停时，如果相关的选择器(按钮)尚未激活，我如何从一开始就播放相关视频？
在我的代码中，所有的视频都是连续播放和循环的，当你显示视频的时候，从来没有从更大的地方开始。
body {
background:grey;
}
#terrace-fw-wrap {
display:block;
width:100%;
min-width:660px;
margin: auto;
text-align: center;
}
#terrace-fw-wrap .content {
display:block;
width:100%;
}
.video-text {
width: 30%;
min-width:300px;
max-width: 400px;
padding: 20px;
color:white;
position: absolute;
top: 20px;
left: 20px;
text-align: left;
}
#terrace-fw-wrap .content .video {
display:none;
width:100%;
}
.active-video {
display:block !important;
width:100% !important;
}
#terrace-fw-wrap .buttons .but {
display:inline-block;
width:150px;
padding:10px;
margin:10px;
text-align: center;
color:black;
background:white;
}
#terrace-fw-wrap .buttons .but:hover {
color:white;
background:black;
cursor: pointer;
}
.active-but {
color:white !important;
background:black !important;
}
video {
width:100%;
}<section id="terrace-fw-wrap">
<section class="content">
<div id="video-1" class="video active-video">
<div class="video-text">
<h2>TEST TEXT 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris orci libero, consequat nec eros nec, hendrerit tristique lorem. Curabitur scelerisque egestas orci, at viverra quam tempor at. Donec aliquam malesuada enim nec euismod. Aliquam dignissim, tortor ac consequat dictum, odio mauris semper elit, ut rhoncus eros nibh sit amet ex. Suspendisse aliquet arcu eu nunc condimentum tristique. Etiam at ex eget diam fringilla finibus in ut quam. Cras eu ultricies purus. Suspendisse potenti. Vivamus in vehicula tellus. </p>
</div>
<video poster="http://static.highsnobiety.com/wp-content/uploads/2015/11/04200037/erika.jpg" loop="" muted="" autoplay="" preload="none">
<source src="http://static.highsnobiety.com/wp-content/uploads/2015/11/04195635/EXP_001_NikeHighSnobiety_TechPackAW15_Web_Erika.mp4" type="video/mp4">
<source src="http://static.highsnobiety.com/wp-content/uploads/2015/11/04195722/EXP_001_NikeHighSnobiety_TechPackAW15_WebM_Erika.webmhd.webm" type="video/webm">
</video>
</div>
<div id="video-2" class="video">
<div class="video-text">
<h2>TEST TEXT 2</h2>
<p>Vivamus eu eleifend lacus, vitae convallis lectus. Quisque efficitur nibh in ligula lobortis, at congue dolor eleifend. Aenean luctus vel magna id varius. Curabitur maximus magna id eleifend vulputate. Nam facilisis pharetra diam in consequat. Sed metus neque, semper id eros id, blandit ornare sem. In sed massa blandit, scelerisque felis a, tristique lorem. Pellentesque id mauris a felis faucibus cursus ut ut elit. Maecenas malesuada velit et ipsum facilisis sagittis. Cras facilisis accumsan commodo. Nulla eu ultrices justo.</p>
</div>
<video poster="http://static.highsnobiety.com/wp-content/uploads/2015/11/04200040/inaki.jpg" autoplay="" loop="" muted="" preload="none">
<source src="http://static.highsnobiety.com/wp-content/uploads/2015/11/04195528/EXP_001_NikeHighSnobiety_TechPackAW15_Web_Inaki.mp4" type="video/mp4">
<source src="http://static.highsnobiety.com/wp-content/uploads/2015/11/04195656/EXP_001_NikeHighSnobiety_TechPackAW15_WebM_Inaki.webmhd.webm" type="video/webm">
</video>
</div>
<div id="video-3" class="video">
<div class="video-text">
<h2>TEST TEXT 3</h2>
<p>Donec auctor vel nisl vel feugiat. Donec imperdiet neque tortor, sit amet rhoncus diam elementum eu. Vestibulum ullamcorper leo ac eros consequat posuere. Integer sit amet scelerisque odio, vitae pulvinar massa. Mauris faucibus auctor ultrices. Nam iaculis imperdiet ullamcorper. Phasellus sit amet mauris quam. Quisque vitae pulvinar ante, at fringilla tellus. Sed venenatis velit quis efficitur auctor. Proin varius sit amet quam sit amet luctus.</p>
</div>
<video poster="http://static.highsnobiety.com/wp-content/uploads/2015/11/04200043/maria.jpg" autoplay="" loop="" muted="">
<source src="http://static.highsnobiety.com/wp-content/uploads/2015/11/04195539/EXP_001_NikeHighSnobiety_TechPackAW15_Web_Maria.mp4" type="video/mp4">
<source src="http://static.highsnobiety.com/wp-content/uploads/2015/11/04195700/EXP_001_NikeHighSnobiety_TechPackAW15_WebM_Maria.webmhd.webm" type="video/webm">
</video>
</div>
<div id="video-4" class="video">
<div class="video-text">
<h2>TEST TEXT 4</h2>
<p>Mauris sed consequat turpis, nec placerat erat. Nullam vehicula, metus id tincidunt dapibus, odio mauris maximus mauris, eget elementum sem nulla auctor magna. Aliquam blandit molestie magna et pellentesque. Quisque vestibulum venenatis feugiat. Donec vel leo et justo fermentum viverra nec in dolor. Etiam vitae venenatis nibh. Nulla nec ornare lorem, ac lacinia metus. Maecenas eget fringilla orci.</p>
</div>
<video poster="http://static.highsnobiety.com/wp-content/uploads/2015/11/04200817/oliver.jpg" autoplay="" loop="" muted="" preload="none">
<source src="http://static.highsnobiety.com/wp-content/uploads/2015/11/04195550/EXP_001_NikeHighSnobiety_TechPackAW15_Web_Oliver.mp4" type="video/mp4">
<source src="http://static.highsnobiety.com/wp-content/uploads/2015/11/04195705/EXP_001_NikeHighSnobiety_TechPackAW15_WebM_Oliver.webmhd.webm" type="video/webm">
</video>
</div>
<div id="video-5" class="video">
<div class="video-text">
<h2>TEST TEXT 5</h2>
<p>Maecenas viverra mi nisl, vitae porta turpis vehicula nec. Donec vel tellus finibus, tincidunt nisl et, ultricies nunc. Mauris at est mollis neque laoreet efficitur non quis quam. Donec at sodales est, quis gravida leo. Pellentesque eu nulla vehicula, consectetur sem sodales, ullamcorper dolor. Donec vitae leo lacus.</p>
</div>
<video poster="http://static.highsnobiety.com/wp-content/uploads/2015/11/04200046/philippe.jpg" autoplay="" loop="" muted="" preload="none">
<source src="http://static.highsnobiety.com/wp-content/uploads/2015/11/04195517/EXP_001_NikeHighSnobiety_TechPackAW15_Web_Felipe.mp4" type="video/mp4">
<source src="http://static.highsnobiety.com/wp-content/uploads/2015/11/04195727/EXP_001_NikeHighSnobiety_TechPackAW15_WebM_Felipe.webmhd.webm" type="video/webm">
</video>
</div>
<div id="video-6" class="video">
<div class="video-text">
<h2>TEST TEXT 6</h2>
<p>Ut neque libero, convallis ac condimentum ac, rhoncus eget lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Morbi vitae risus eros. Nunc ullamcorper mi neque, sit amet sollicitudin libero malesuada in. Nulla sodales eros vitae tortor sodales, vitae condimentum mauris scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris hendrerit sodales magna in venenatis. </p>
</div>
<video poster="http://static.highsnobiety.com/wp-content/uploads/2015/11/04200049/shera.jpg" autoplay="" loop="" muted="" preload="none">
<source src="http://static.highsnobiety.com/wp-content/uploads/2015/11/04195600/EXP_001_NikeHighSnobiety_TechPackAW15_Web_Shera.mp4" type="video/mp4">
<source src="http://static.highsnobiety.com/wp-content/uploads/2015/11/04195709/EXP_001_NikeHighSnobiety_TechPackAW15_WebM_Shera.webmhd.webm" type="video/webm">
</video>
</div>
</section>
<div class="buttons">
<div class="but active-but" data-image="video-1">
Button 1
</div>
<div class="but" data-image="video-2">
Button 2
</div>
<div class="but" data-image="video-3">
Button 3
</div>
<div class="but" data-image="video-4">
Button 4
</div>
<div class="but" data-image="video-5">
Button 5
</div>
<div class="but" data-image="video-6">
Button 6
</div>
</div>
</section>$(function(){
$('.but').hover(function() {
$('.but').removeClass('active-but');
$(this).addClass('active-but');
$('.video').removeClass('active-video');
$('#' + $(this).attr('data-image')).addClass('active-video');
});
});小提琴手：https://jsfiddle.net/sLeqjhxh/
谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-04-15 15:14:59
下面是一种使用currentTime重置视频以及视频暂停和播放功能的工作解决方案
https://jsfiddle.net/sLeqjhxh/4/
$(function(){
$('.but').hover(function() {
if($(this).hasClass('active-but')){
return;
}
$('.but').removeClass('active-but');
$(this).addClass('active-but');
$('.active-video video')[0].pause();
$('.active-video video')[0].currentTime = 0;
$('.video').removeClass('active-video');
$('#'+ $(this).attr('data-image')).addClass('active-video');
$('#'+ $(this).attr('data-image') + ' video')[0].play();
});
});编辑:我添加了一个条件，如果按钮已经激活:)
Stack Overflow用户
发布于 2016-04-15 15:03:42
您需要在悬停功能中创建对视频的引用
var video = $('#' + $(this).attr('data-image')); video.addClass('active-video');
然后你可以说
video.pause(); // optional
video.currentTime = 0; // goes to start
video.play();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36650205
复制相关文章
相似问题
腾讯云开发者
