Auto pause/play on scroll Javascript autoplay video html5

I am attempting to create a video gallery on html5 with JS. I have it where you can scroll left to right between muted autoplay html5 videos and the videos will play/pause when scrolled onto/away from. This works fine.

Code Pen

The problem I am running into is when a user adjusts any of the html5 controls the autopause on scroll will no longer work. I am ok with turning off user video controls but I still need a way to toggle audio on/off. I added a button for it, but even when a user toggles the audio from the button, the on scroll pause/play JS stops working.

Hopefully, this makes sense. I appreciate any help!

the autoplay/pause Jquery I have:

$(window).scroll(function(){
  var scroll = $(this).scrollTop();
  scroll > 300 ? myvid.pause() : myvid.play()
}) ```