autoplay attribute plays all videos that are in django for loop

I'm building a web application with Django that includes a list of video generated by a for loop. Each video element has an HTML5 video tag with a src attribute pointing to a different video file, and an autoplay attribute set to true. However, when I render the page, all videos start playing at once, overlapping each other and creating a chaotic sound.

What could be causing this behavior, and how can I fix it? Is there a way to make each video start playing only when it's visible on the screen, or when the user interacts with it? Any help would be appreciated.

I want to set the videos in my for loop to autoplay so that when a user visits the website, there is no need to click on the play and pause icons when they want to watch different videos. What I want is for the video to stop when the user scrolls down and the next one to start playing like facebook videos and other social media platform, my friend suggested that, I can use JavaScript to fix that, but how can I use JavaScript to do that?

<div  class="container video-container">
        <div class="row justify-content-center">

          <div class="col-md-3 p-1">
            {% for video in my_videos reversed %}
            <div class="row position-relative my-1 wrapper">
              <video loop id="my-video" class="video-js vjs-theme-city vjs-default-skin vjs-big-play-button text-center" autoplay auto="true" width="1000" controls data-setup="{}">
                <source src="{{ video.video.url }}" type="video/mp4">
              </video>
              <div class="row position-absolute bottom-0 d-flex align-items-end mb-3 mx-auto">
                <div class="col-md-10 col img_wrapper">
                  <a style="text-decoration: none;" href="{{ video.get_user_public_url }}">
                    <div class="row">
                      <div class="col-auto pe-1">
                        <img class="rounded-circle thumb" src="{{video.get_user_photo}}" alt="">
                      </div>
                      <div class="col ps-1">
                        <b class="text-white">
                            {{video.user}}
                        </b>
                        <br>
                        <small class="text-white">{{video.title}}</small>
                      </div>
                    </div>
                  </a>
                </div>
                <div class="col-md-2 col-auto video-icons d-flex flex-column">
                  <a href="">
                    <span class="material-symbols-outlined">
                        thumb_up
                    </span>
                  </a>
                  <a href="{% url 'Play-Video' video.slug %}">
                    <span class="material-symbols-outlined">
                      comment
                    </span>
                  </a>
                  <a href="{% url 'Complain-Video' video.pk %}">
                    <span class="material-symbols-outlined">
                      flag
                    </span>
                  </a>
                </div>
              </div>
            </div>
            {% endfor %}
          </div>

          
        </div>
      </div>

my css:

.thumb {
      width: 30px;
      height: auto;
    }
    .rounded-circle {
        width: 25px;
        height: 25px;
    }
    .video-icons a span{
        margin-bottom: 50px;
        color: white;
        font-size: 30px;
        
    }
    video{
        object-fit: fill;
        height: 1000px;
        width: 100%;
    }

my views:

def videos(request):
 
    my_videos = Video.objects.all()
    context = {
        'my_videos':my_videos,
    }
    return render(request, 'video/videos.html', context)

The behavior I'm seeing is due to all videos starting to play simultaneously when the page loads because I have set the autoplay attribute to true for each video. One way to fix this issue is to add a script, so in this case:

<script>
    // Get all video elements
    const videos = document.querySelectorAll('video');

    // Play video when it is in view
    const playVideoInView = () => {
        for (let i = 0; i < videos.length; i++) {
            const video = videos[i];
            const rect = video.getBoundingClientRect();
            const isInView = (rect.top >= 0 && rect.bottom <= window.innerHeight);
            if (isInView) {
                video.play();
            } else {
                video.pause();
            }
        }
    };

    // Add event listener to window for scrolling and playing videos in view
    window.addEventListener('scroll', playVideoInView);
    window.addEventListener('resize', playVideoInView);
    window.addEventListener('load', playVideoInView);
</script>

In this code, I select all video elements using querySelectorAll(). Then, I define a function playVideoInView() that checks if each video element is in view using getBoundingClientRect(). If a video element is in view, we start playing it using the play() method, otherwise, I pause it using the pause() method.

Finally, I add event listeners to the window object for the scroll, resize, and load events, which will trigger the playVideoInView() function whenever the user scrolls, resizes the window, or loads the page.