Video ohne Controls aber eigenem play/pause button

Question

Hallo,

ich versuche ein Video ohne Controls in den Ofb einzubinden, aber mit eigenem Start/Pause- Button. Allerdings wertde ich immer auf die nächste Seite gebracht, wenn ich "Start" drücke. Kann jemand einen Fehler erkennen?

<div class="video-player">
    <video class="video">
        <source src="B_Clip5_.mp4"/>
    </video>
</div>
 <button class="play-button" title="Play">►</button>


<script>
const videoPlayer = document.querySelector('.video-player')
const video = videoPlayer.querySelector('.video')
const playButton = videoPlayer.querySelector('.play-button')

//Play and Pause button
playButton.addEventListener('click', (e) => {
  if(video.paused){
    video.play()
    e.target.textContent = '❚ ❚'
  } else {
    video.pause()
    e.target.textContent = '►'
  }
})


// Weiter-Knopf ausblenden
SoSciTools.attachEvent(window, "load", function(evt) {
  SoSciTools.submitButtonsHide();
});
// Weiter-Knopf am Ende des Videos wieder anzeigen
SoSciTools.attachEvent(stimulus, "ended", function(evt) {
  SoSciTools.submitButtonsDisplay();
});
 

</script>