I can't handle media events in while loop in javascript because the browsers freeze

See more:

Javascript

PHP

media

, +

Hello. I'm trying to handle events of media in my PHP webpage project using Laravel framework and I'm pretty new to it. I have an audio and an video, the audio will automatically play when the webpage is loaded and I want when the video starts, the audio will stop until I pause the video.
Here is my code:

<pre>
<script>
     window.onload = function()
     {
         var mainaudio = document.getElementById("mainaudio");
         var trailervideo = document.getElementById("trailer-video");
         mainaudio.volume = 0.1;

         //If the video plays, the audio stops until the video pauses again.
         var flag = 0;
         trailervideo.onplay = function()
         {
             flag = 1;
             while (flag === 1)
             {
                 mainaudio.pause();
                 if (flag === 1)
                 {
                      mainaudio.pause();
                 }
                 else if (flag === 0)
                 {
                     mainaudio.play();
                 }
                 trailervideo.onpause = function ()
                 {
                     flag = 0;
                 }
             }
         }
     }
</script>

But when I started the webpage, the browser froze for seconds and I couldn't even know if the audio stops when the video starts. Please help!

What I have tried:

I firstly tried on Firefox and then OperaGX and even Edge Chromium (all of them are up to date) but they kept freezing unreasonably.