javascript - HTML, JS Cum să redai/oprești un videoclip la trecerea mouse-ului

După cum puteți vedea, am o întrebare despre redarea/oprirea videoclipului la trecerea mouse-ului. Utilizatorul ar trece mouse-ul peste videoclip și acesta ar începe să fie redat, iar când el își mută mouse-ul, videoclipul s-ar opri. Este posibil și cum? Am un tag video aici

<video id="video" controls="" loop="" src="/wp-content/uploads/2016/06/vid/elipsiniai-treniruokliai.mp4" width="auto" height="auto" alt=""></video>

Răspuns #1

Actualizare

A fost adăugată o corecție pentru eroarea care apărea în consolă când se trecea cursorul peste videoclipuri (testat în Chrome)

Excepție DOM născută (în promisiune): play() a eșuat deoarece utilizatorul nu a interacționat mai întâi cu documentul.

adăugarea atributului muted="muted" la tagul video rezolvă problema. Pentru detalii vezi acest răspuns

Poftim

$(document).ready(function() {
  $(".myvideos").on("mouseover", function(event) {
    this.play();

  }).on('mouseout', function(event) {
    this.pause();

  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt="" muted="muted"></video>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt="" muted="muted"></video>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt="" muted="muted"></video>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt="" muted="muted"></video>

Răspunsul #2

Încercați :

$("#video").hover(
    ()=>{ $(this).get(0).play(); },
    ()=>{ $(this).get(0).pause(); }
);