html - :hover 上的视频 DIV 背景

Question

我目前正在尝试创建一个网站，其中将缩略图网格加载到页面中，当用户(在桌面上)将鼠标悬停在选定的缩略图上时，一个小视频会在 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 - 这是否意味着所有视频都在后台加载并且实际上正在“播放”？ - 我担心显示大量视频和数据使用时的潜在性能影响!有更好的方法吗？

这是一个 fiddle 的链接:http://jsfiddle.net/jameshenry/0wo79wva/1/

Answer 1

感谢@somethinghere 和@Shikkediel 以及以下 Javascript 的帮助解决了问题

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