При наведении / переключении Воспроизведение видео HTML5 с использованием только ванильного JavaScript

Большинство людей используют jQuery для переключения воспроизведения / паузы для видео HTML5, но на самом деле вам нужно всего около 12 строк кода, чтобы все это осуществить.

Посмотреть на Codepen: http://codepen.io/jfrancisayres/pen/bwpqQP

Эта статья не должна быть слишком многословной, потому что она самоочевидна, что происходит - так что вперед ...

JavaScript:

window.onload = function() { //executes code after DOM loads
 //--- select all <video> on the page
 const vids = document.getElementsByTagName(‘video’)
 // Loop over the selected elements and add event listeners
 for (let i = 0; i < vids.length; i++) {
   vids[i].addEventListener( ‘mouseover’, function(e) { 
     vids[i].play()
   })
   vids[i].addEventListener( ‘mouseout’, function(e) {
     vids[i].pause()
   })
 }
}

HTML:

<! — Use HTML5 Video syntax anywhere in your code →
<video class=”some-css” loop>
   <source src=”Your-Video.mp4" type=”video/mp4" />
</video>