Question

我有以下问题：

我想制作一个带视频的投资组合网格
当用户将鼠标悬停在Portfolio-Item＆amp;上时，视频应该开始播放。当它不在它之上时它应该停止

问题我使用Overlays将颜色和文本添加到Portfolio-Items。这就是Javascript没有反应的原因。

信息：没有覆盖的底部视频就是为了表明JS正在运作。

感谢您的帮助!!!

 
 * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.row {
  clear: both;
}

.spalten-6 {
  width: 49.99992%;
}

.spalten-12 {
  width: 100%;
}

.spalten-6,
.spalten-12 {
  float: left;
}

.img-box img {
  width: 100%;
}

.img-box {
    border-left: 3px solid white;
    position: relative;
    margin-left: -3px; /* nur weil ich eine Border von 6px links hinzugefügt habe. Sonst habe ich einen Rand */
}
 
 .img-box-figcaption {
              position: absolute;
              bottom: 0%;
              right: 0%;
              transform: translate(-10%, -10%);
              z-index: 100;
              font-size: 30px;
              color: white;
              text-align: center;
              opacity: 0.9;
              font-weight: 500;
               z-index: 200;
            
        }
        
        .title {
            position: relative;
            top: -25px;
            font-size: 15px;
            
        }
        
        .surround {
            position: relative;
        } 
        
        .img-play-figcaption {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 100;
        }
        
        .img-play-figcaption img {
           width: 30px;
            opacity: 0.8;
        }
        
         .img-box:after {
        position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 99%;
  background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.1980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), transparent;
  background: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), transparent;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), transparent;
  -webkit-background-size: 1px 1px;
  background-size: 1px 4px;
    }

 <div class="row">
   <div class="spalten-3 spalten-small">
     <div class="surround">
      <div class="img-box">
     <img src="Images/portfolio-bg.jpg" alt="">
       </div>
       <div class="img-play-figcaption">
           <img src="Images/play-icon.png" alt="">
       </div>
       <div class="img-box-figcaption">
           <p>CULCHA CANDELA <br> <span class="title">• Rodeo •</ span></p>
       </div>
       </div>
   </div>
   <div class="spalten-6 spalten-small">
      <div class="surround">
       <div class="img-box">
        <div style="text-align:center" onmouseover="Play()" onmouseout="Pause()"> 
  <video id="video1" width="100%">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.ogg" type="video/ogg" />
    Your browser does not support HTML5 video.
  </video>
</div>

       </div>
       <div class="img-play-figcaption">
           <img src="Images/play-icon.png" alt="">
       </div>
       <div class="img-box-figcaption">
           <p>FARGO &amp; JAMIE LEE <br> <span class="title">• Jetzt erst recht •</span></p>
       </div>
   </div>
    </div>
    <div class="spalten-3 spalten-small">
      <div class="surround">
       <div class="img-box">
      <img src="Images/portfolio-bg-grey.jpg" alt="">
       </div>
       <div class="img-play-figcaption">
           <img src="Images/play-icon.png" alt="">
       </div>
       <div class="img-box-figcaption">
           <p>FARGO &amp; JAMIE LEE <br> <span class="title">• Jetzt erst recht •</span></p>
       </div>
   </div>
    </div>
    </div>
    
    
    
       <div class="row">
           <div class="spalten-12 spalten-small">
               <div class="footer">
                    <p>© BOOMYEAH PRODUCTION</p>
                </div>
           </div>
        </div>
        
        <div style="text-align:center" onmouseover="Play()" onmouseout="Pause()"> 
  <video id="video1" width="480">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.ogg" type="video/ogg" />
    Your browser does not support HTML5 video.
  </video>
</div>

<script type="text/javascript"> 
var myVideo=document.getElementById("video1"); 

function Pause()
{ 
  myVideo.pause(); 
}
function Play()
{
if (myVideo.paused) 
  myVideo.play();     
}    
    
</script>

Answer 1

 <div class="surround" onmouseover="Play()" onmouseout="Pause()">
        <div class="img-box">
         <div style="text-align:center"  >
   <video id="video1" width="100%">
     <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.ogg" type="video/ogg" />
     Your browser does not support HTML5 video.
   </video>
 </div>

你是如何为你工作的？将on事件移动到父div。或者尝试使用img-box类的div ...我认为你的文本对齐中心div正在覆盖我的img-box div所以它不会触发鼠标超过事件......

Answer 2

父母徘徊时可以使用播放功能。这是一个例子：

var parentVideo = $("#your div id");
var video = $("#video");
parentVideo.hover(function(){
  //When hovered
  video.play(function(){

  });
},
function(){
  //When unhovered
  video.pause(function(){

  });
});

注意，html5视频播放器有一些播放视频的方式。出于某种原因，如果使用jquery，可以使用video [0] .play（）和video [0] .pause（）。

停止＆amp;悬停时启动视频

2 个答案: