Tengo una página web simple con un video adentro, me gustaría que cuando te desplaces al div que contiene el video, el desplazamiento se desactive y se reemplace con los controles de video (si me desplazo hacia abajo, el video se reproduce en 1 cuadro por desplazamiento, si Me desplazo hacia arriba en el video hacia atrás). Obviamente, si el video termina, el desplazamiento debe reactivarse y continuar hasta el final de la página (lo mismo si envío el video de regreso al principio). Este es el vídeo en cuestión:

 <div id="bound-one" class="scroll-bound"> <div class="content"> <video id="video1" width="100%" muted preload > <source src="video.mp4"> </video> </div> </div> </div> ```