視頻DIV背景：懸停

我目前正在嘗試創建一個網站，其中網格縮略圖加載到網頁中，當用戶（在桌面上）懸停在選定的縮略圖上時，一個小視頻播放DIV。視頻DIV背景：懸停

目前我的CSS正在尋找這樣的事情：

.griditem { 
    position: relative; 
    background-color: #777; 
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); 
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); 
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); 
    width: 50%; 
    overflow: hidden; 
    max-width: 690px; 
    min-width: 360px; 
} 

.video { 
    position: relative; 
    margin-top: none; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    display: none; 
} 

.overlay { 

    position: absolute; 
    left: 0px; 
    top: 0px; 
    bottom: 0px; 
    right: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 999; 
} 


.titles { 
    display: table; 
    width: 100%; 
    height: 100%; /*important, forces to 100% height of parent*/ 
    opacity:0; 
    -webkit-transition: opacity .5s ease; 
    -moz-transition: opacity .25s ease; 
    background: rgba(0, 0, 0, 0.5); 
    color: #FFFFFF; 
    text-decoration: none; 

} 


.titles p { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    text-decoration: none; 
    color: #FFFFFF; 
    font-size: 25px; 
    font-family: helvetica; 
} 

.griditem:hover .titles { 
    text-decoration: none; 
    opacity:1; 
} 

.imgspacer { 
    width:100%; 
} 

.griditem:hover .video { 
    display: inline; 
} 

.griditem:hover .imgspacer { 
    display: none; 
}

和我的HTML

<div class="griditem" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/8/80/Aspect_ratio_-_16x9.svg); background-size:100% 100%;"> 
<div class="imgspacer"><img src="http://i.imgur.com/JnW9SPx.png" width="100%" alt="Spacer 16x9" /></div> 
      <div class="video"> 
      <video id="video" preload="none" muted autoplay loop poster="http://media.w3.org/2010/05/sintel/poster.png" style="width:100%; height:100%"> 
      <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> 
      <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"> 
      <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg"> 
      <p>Your browser does not support HTML5 Video!</p> 
      </video> 
       </div> 
    <div class="overlay"> 
    <a href="http://www.google.com" class="titles"> 
    <p>BIG TEXT<br> 
     small Title<p> 
    </a> 
    </div> 
</div>

這似乎在一瞬間被相當不錯的了，但我不知道它是否當.griditem:hover被觸發時，可以讓視頻始終始於開始（基本重置）？

此外，我在視頻DIV上使用了display:none - 這是否意味着所有視頻都在後臺加載，並且實際上是在播放？ - 我擔心在顯示大量視頻和數據使用時可能會對性能造成影響！有沒有更好的方法來做到這一點？

下面是這個小提琴的鏈接：http://jsfiddle.net/jameshenry/0wo79wva/1/

來源

2015-09-18 hj8ag

你將不得不使用JS來檢測' mouseenter'並將'video.currentTime'重置爲0來執行此操作。 – somethinghere

對不起，但我的Javascript有點缺乏，至少可以說！你有一個例子或鏈接，我可以查看這些功能？ – hj8ag

看看這個基本的想法。 http://codepen.io/Lewiscowles1986/pen/MYeNBz – Shikkediel

解決由於@somethinghere和@Shikkediel的幫助和下面的JavaScript

$(document).ready(function() { 
    $('.overlay').mouseout(function() { 
    $('#testvideo').get(0).currentTime = 0; 
    }); 
});

來源

2015-09-21 18:27:45 hj8ag

在'testvideo'之前你有一個不屬於那裏的散列標籤。其餘的工作很好。 ;-) – Shikkediel

完全複製並粘貼錯誤的小提琴Javascript！現在修復。感謝您發現:) – hj8ag

現在只有當它排隊，並很好地縮進，哈哈。 :-p – Shikkediel

視頻DIV背景：懸停

回答

相關問題