當選擇器開始播放時，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播放特定視頻

回答

相關問題