2016-06-08 5 views
1

im Grunde bekameinen mousemove- Zuhörer zu den Kontrollen ein Video-Element mit Javascript

<video width="320" height="240" controls> 
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
Your browser does not support the video tag. 
</video> 

eine grundlegende Video-Element Ich habe Hinzufügen Gibt es eine nicht-jQuery Weg, um einen Zuhörer zu den Kontrollen eines Videoelement hinzufügen ? die Kontrollen, wie Sie wissen, wird so auf verschiedenen Browsern aussehen:

enter image description here

Alles was ich brauche ist eine Funktion, sobald ein Benutzer schweben über das laufen.

Edit: Ich brauche auch eine Funktion, die einmal bewegt ein Benutzer aus den Kontrollen

+0

Es verfügbar viel eigenen HTML-Video-Player sind, die die Steuerung erlauben würde, die Sie suchen. Ist das eine Option? – theblindprophet

+0

Ich kann nichts anderes als reines Javascript verwenden, da es eine API ist. Hinzufügen von jQuery ist auch unmöglich, da es eine große Bibliothek ist und ich will es nicht erzwingen. Im Grunde brauche ich einen leichten (max. 100 Zeilen) JavaScript-Code. – user1938653

+0

Ich habe Jquery nicht erwähnt, es kann leicht mit Javascript gemacht werden. Wenn Sie damit einverstanden sind kann ich Ihnen ein Beispiel geben. – theblindprophet

Antwort

0

So fügen Sie eine Maus über Ereignis an einem Objekt ausgeführt werden soll, können Sie den folgenden Code verwenden:

yourobject.addEventListener("mouseover", function() { 
    //whatever you want to do 
}); 

um eine Maus aus Ereignisse zu einem Objekt hinzufügen, können Sie den folgenden Code verwenden:

yourobject.addEventListener("mouseout", function() { 
    //whatever you want to do 
}); 

Referenzen:

+0

klingt vielversprechend, aber wie kann ich dieses Ereignis nur an die Steuerung anheften? Ich weiß, wie man ein mouseover und mouseout Ereignis auf einem normalen Videoelement macht, aber das ist nicht hilfreich. – user1938653

+0

@ user1938653 Dann müssen Sie Ihre eigenen Steuerelemente zu dem Video hinzufügen. Ich fand gute Tutorials hier: http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos und http://www.creativebloq.com/html5/build-custom-html5-video-player- 9134473 – Axel