Stop & Start Video On Hover

Ich habe folgendes Problem:Stop & Start Video On Hover

Ich will einen Portfolio Grid mit Videos machen
Die Videos starten sollen, wenn der Benutzer über das Portfolio-Item schwebt & und es sollte aufhören, wenn nicht darüber

Problem ich für das Hinzufügen von Farben und Text zu den Portfolio-Elementen Overlays verwenden ist. Deshalb reagiert das Javascript nicht.

Informationen: Das Video am Ende ohne Overlay ist nur da, um zu zeigen, dass das JS funktioniert.

Vielen Dank für Ihre Hilfe !!!


 
* { 
 
    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>

Quelle

2017-08-18 PeterPilz

<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>

Wie funktioniert Thay Arbeit für Sie? Verschieben Sie die on-Ereignisse zum übergeordneten div. Oder versuchen Sie das Div mit der img-Box-Klasse ... Ich denke, Ihr Text ausrichten center div wird abgedeckt meine img-box div so seine nicht auslösen mouse over events ...

Quelle

2017-08-18 21:55:07 Harry

Dank Mate. Funktioniert für ein Video. Kannst du mir sagen, was ich tun muss, wenn ich das für mehr als ein Video verwenden möchte? (Ich habe den gleichen Code auf einen anderen Portfolio-Artikel angewendet. Nur der zweite Artikel arbeitet jetzt mit dem Effekt) – PeterPilz

** Bearbeiten ** ah nein. Wenn ich denselben Code für mehrere Elemente anwende, wird nur ein Video abgespielt. Aber dieser spielt, wenn ich über den anderen Elementen den gleichen Code schwebe – PeterPilz

Ich änderte den Code in ** var myVideo = document.getElementById ("video2", "Video1", "Video3"); ** aber nur der erste Video (Video2) funktioniert – PeterPilz

Sie können Play-Funktion verwenden, wenn Elternteil schwebte. Dies ist Beispiel:

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

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

    }); 
});

Hinweis, html5-Video-Player für die Wiedergabe von Video eine gewisse Art und Weise hat. Aus irgendeinem Grund können Sie video [0] .play() und video [0] .pause() verwenden, wenn Sie jquery verwenden.

Quelle

2017-08-18 23:02:22 user8455694

Stop & Start Video On Hover

Antwort

Verwandte Themen