Autoplay HTML-Video auf Hover?

Ich habe über das Internet gesucht und einige gute Beispiele gefunden, aber aus irgendeinem Grund, wenn ich versuche, sie mit meinem Code zu implementieren, funktioniert es nicht. Ich kann nicht herausfinden, was ich falsch mache ..Autoplay HTML-Video auf Hover?

(Tut mir leid für die niederländischen Klassennamen, hoffe es ist nicht zu verwirrend). Tut mir leid, wenn ich wirklich dumm bin.

HTML:

<div class="drievijfde-wrapper portfolio-wrapper"> 
    <div class="single-item singlevidjs drievijfde-padding" style="background-image:url(img/work-placeholder.png); background-position: center center; background-size: cover;"> 
     <video loop preload="auto" id="portfolio-vid"> 
      <source src="video/test reel_1.mp4" type="video/mp4"> 
     </video> 
     <a href="#"> 
      <div class="metadata"> 
       Interior Lamps 
      </div> 
     </a> 
    </div> 
</div>

JS:

var figure = $(".singlevidjs").hover(hoverVideo, hideVideo); 

function hoverVideo(e) { 
    $('video', this).get(0).play(); 
} 

function hideVideo(e) { 
    $('video', this).get(0).pause(); 
}

Quelle

2017-04-03 tehchriis

zunächst, pls etwas detaillierter sein, wenn ein Problem beschreiben : mein Code funktioniert nicht, wird niemand helfen;) sowieso, hier ist eine funktionierende jsbin: http://jsbin.com/cupusesoce/edit?html,js,output so muss das Problem sein: jQuery ist nicht geladen oder ein Problem mit Ihrem Video :) – MarcelD

es funktioniert [hier] (https: // jsfiddle .net/8r396y6u /) überprüfen Sie Ihre 'jquery' hinzugefügt? –

Ja! Ich habe die Jquery irgendwo vermasselt, ich fühle mich jetzt wirklich schlecht. Danke, dass du darauf hingewiesen hast. Und Yea @DincaAdrian Ich zuckte zusammen, als ich es tat, aber es war nur zum Testen. Vielen Dank – tehchriis

können Sie für diesen folgenden jQuery Code verwenden

$('#portfolio-vid').mouseover(function(){ 
    $(this).get(0).play(); 
}).mouseout(function(){ 
    $(this).get(0).pause(); 
})

Quelle

2017-04-03 10:59:14

Autoplay HTML-Video auf Hover?

Antwort

Verwandte Themen