I wanted to restart the video when full page js scroll up and down, anything i can do for this?

Question

I use fullpage js, it can play and pause when I scroll but the problem of this is I wanted to restart the video when i scroll up or down

<div id="fullpage">
    <div class="section">
        <video style="object-fit: cover" 
        id="videoPlay"
        tabindex="-1" 
        muted="muted" 
        data-autoplay
        webkit-playsinline 
        playsinline 
        class="my-video-scroll"
        id="slide1" 
        data-no-fullscreen="true" 
        controlslist="nodownload" 
        loop 
        controls>
        <source src="../video/video1.mp4"></video>
    </div>
    <div class="section">
    <video style="object-fit: cover" 
        id="videoPlay"
        tabindex="-1" 
        muted="muted" 
        data-autoplay
        webkit-playsinline 
        playsinline 
        class="my-video-scroll" 
        id="slide2" 
        data-no-fullscreen="true" 
        controlslist="nodownload" 
        loop 
        controls>
        <source src="../video/video2.mp4"></video>
    </div>
</div>

Answer 1

Use fullPage.js callbacks such as onLeave and then use this to restart the video every time you leave the section.

Here's an example:

new fullpage('#fullpage',{
  onLeave: function(origin, destination, direction, trigger){
     if(origin.anchor = 'my-video-section-anchor'){
         var video = document.getElementById('myVideoId');
         video.pause();
         video.currentTime = 0;
         video.load();
     }
  } 
}