视频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 -这是否意味着所有的视频都在后台加载并且实际上正在"播放"?-我担心在显示大量视频和数据使用时潜在的性能影响!有更好的方法吗?

这里是一个链接到这个小提琴:http://jsfiddle.net/jameshenry/0wo79wva/1/

Answer 1

在@somethinghere和@Shikkediel以及以下Javascript的帮助下解决了

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