当选择器开始播放时，jQuery播放特定视频

我最近在这里遇到了问题，这很棒，但是我遇到了另一个问题。当选择器开始播放时，jQuery播放特定视频

如果悬停在相关选择器（按钮）上，如果它尚未激活，如何从头开始进行相关视频播放？

目前，在我的代码中，所有视频都是连续播放和循环播放，并且在显示该视频时从不从大开始开始。

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'); 
    }); 
});

的jsfiddle：https://jsfiddle.net/sLeqjhxh/

感谢

来源

2016-04-15 Chobbit

您只需要一个视频标签并使用JS替换视频中的视频标签。拥有多个标签可以让所有视频一次播放。 – tylerism

下面是一个使用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(); 
    }); 
});

编辑工作的解决方案：我加了一个条件如果按钮已经激活，则返回:)

来源

2016-04-15 15:14:59 tylerism

这真的很好，谢谢，只是最后有没有办法使当前活动的视频不能再次启动时，你悬停在活动按钮？ – Chobbit

我编辑了我的解决方案以解决这个问题:) – tylerism

您还应该从视频中删除除第一个以外的所有自动播放属性 – tylerism

你需要你的悬停功能中创建您的视频参考

var video = $('#' + $(this).attr('data-image')); video.addClass('active-video');

那么你可以说

video.pause(); // optional 
video.currentTime = 0; // goes to start 
video.play();

来源

2016-04-15 15:03:42

当选择器开始播放时，jQuery播放特定视频

回答

相关问题