Videos with sound in the mobile browser play like Instagram Reels after permission from user

Question

I have created an Instagram clone and have a button that toggles the sound on or off through a variable, setting it to True or False. Now, if the user turns on the sound and then swipes to the next video, the next video does not play unless the user sets the value to false via the sound button, meaning the sound is off, and then the video plays. If they press the button again, the sound comes on. It's important to note that if the user turns on the sound for the first video and then switches to the next video not by swiping but by clicking/tapping, the sound stays on and the video plays immediately. What do I need to change so that a swipe is valued the same as a tap on a smartphone?

function loadnextvideo(){

     <.....
    another code -- another code -- another code
     .....>

$("#"+counter.toString()+"Mainvideo").find("#"+counter.toString()+"videoholder0").find("video").each(function(){
  
        Video = this
        if (ton == false){
          this.play();
          $(this).prop("muted", true)
        
        } else {
          this.play();
          $(this).prop("muted", false)
    

        }

 
      })
    })
}

with this code it works:

$(".buttonup").click(function(){
  loadnexvideo()
})

with this code it NOT works:

var startX, startY, distX, distY, threshold = 20; // Mindestabstand für einen Swipe
var swipeArea = document.body;
var isSwipe = false; // Variable, um zu prüfen, ob es ein Swipe ist

swipeArea.addEventListener('touchstart', function(e) {
  var touchObj = e.changedTouches[0];
  startX = touchObj.pageX;
  startY = touchObj.pageY;
  isSwipe = false; // Zurücksetzen auf false bei jedem neuen Touchstart
}, false);

swipeArea.addEventListener('touchmove', function(e) {
  var touchObj = e.changedTouches[0];
  distX = touchObj.pageX - startX;
  distY = touchObj.pageY - startY;
  
  // Prüfen, ob die Bewegung den Schwellenwert überschreitet
  if (Math.abs(distX) > threshold || Math.abs(distY) > threshold) {
    isSwipe = true; // Setze isSwipe auf true, da es ein Swipe ist
    e.preventDefault(); // Unterdrücken Sie das Scrollen nur, wenn es ein Swipe ist
  }
}, false);

swipeArea.addEventListener('touchend', function(e) {
  if (isSwipe) {
    // Führen Sie Aktionen nur aus, wenn ein Swipe erkannt wurde
    if (Math.abs(distY) > Math.abs(distX)) {
      if (distY > 0) {
        // Swipe back
      } else {
        // Swipe to next video
        loadnexvideo()
      }
      e.preventDefault();
    }
    isSwipe = false; // Swipe-Behandlung abgeschlossen, zurücksetzen
  }
  // Wenn isSwipe false ist, lassen Sie das normale Verhalten zu, was bedeutet, dass Click-Events ausgelöst werden
}, false);