auf Hover Bild sollte es Video abspielen

Question

Ich brauche etwas Hilfe hier .. Ich habe Video zu meinen Bildern so verknüpft, wenn jemand auf mein Bild klickt ein Video erscheint, aber ich möchte das Video sollte sobald jemand das Bild schwebt . SZENARIO: Es gibt 4 Bilder in einer Reihe (250 * 250 Pixel) und wenn jemand das erste Bild oder ein beliebiges Bild bewegt, sollte das Video in der gleichen Bildgröße (250 * 250) abgespielt werden und die Maus zu einem anderen Bild bewegen dieses Video sollte für dieses bestimmte Bild stoppen und Video starten sollte

HTML spielen:

<div class="row"> 
<div class="col-md-3"> 
    <img src="resources/image.jpg" data-src="https://www.youtube.com/embed/fIHH5-HVS9o?autoplay=1" onclick="showVideo(this)"/> 
</div> 
<div class="col-md-3"> 
    <img src="resources/image.jpg" data-src="https://www.youtube.com/embed/fIHH5-HVS9o?autoplay=1" onclick="showVideo(this)"/> 
</div> 
<div class="col-md-3"> 
< img src="resources/image.jpg" data-src="https://www.youtube.com/embed/fIHH5-HVS9o?autoplay=1" onclick="showVideo(this)"/> 
</div> 
</div> 

JS:

function showVideo(obj){ 
$("#youtube").attr("src", $(obj).data("src")); 
$("#videoModal").on("hide.bs.modal", function() { 
    $("#youtube").removeAttr("src"); 
}).modal('show'); 

}

HTML:

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel"> 
    <div class="modal-dialog modal-lg" role="document"> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
    <h4 class="modal-title" id="videoModalLabel">Modal title</h4> 
    </div> 
    <div class="modal-body"> 
    <iframe id="youtube" width="100%" height="500px"> 
</iframe> 
    </div> 
</div> 
</div> 
</div> 

Answer 1

eine iframe nach jedem Bild hinzufügen mit display:none. Ändern Sie für onMouseOver zu display:block und onMouseOut sollte es zu display:none wechseln. Erstellen Sie Funktionen für onMouseOver und onMouseOut in your js`.

<div class="col-md-3"> 
    <img id="image" src="resources/image.jpg" data-src = "https://www.youtube.com/embed/fIHH5-HVS9o?autoplay=1" onclick = "showVideo(this)" onMouseOver="showVideoOnHover(this)" onMouseOut="hideVideo()"/> 

    <iframe id="youtube" width="100%" height="500px" style="display:none;"> 
    </iframe> 
</div> 

Und in Ihrem js:

//add onHover function. 
function showVideoOnHover(obj) 
{ 
    $("#image").css("display","none"); 
    $("#youtube").css("display","block"); 
    $("#youtube").attr("src", $(obj).data("src")); 
} 
function hideVideo() 
{ 
    $("#youtube").css("display","none"); 
    $("#image").css("display","block"); 
}