In the Safari browser, the script restarts, but does not play video on the event

Viewed 37

Got bumped with a problem, maybe someone can help me with it.

There is a script that should restart and play a video on an event ( play video.play(); ). On other browsers like Chrome etc. it works, except Safari.

On Safari it just resets the video to 0, but doesn't play it.

Seems like video.play() doesn't work on that browser.

Autoplay and mured are on.

Has anyone had this problem?

Here is the website https://luna-wealth-3b31bac5f1f8e980696881bf9d5.webflow.io/client-online-access

<script>
  window.addEventListener('DOMContentLoaded', function () {

    const video = document.getElementById("573dfe8f-6592-57e6-c48c-8e93fbdae2e3-video");
    const trigger = document.getElementById("trigger");
    const observerVideo = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        if (video.currentTime === 0) {
          video.muted = true;
          video.play();
        }
      }
    }, { threshold: 1 });

    const observerTrigger = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        if (video.currentTime !== 0) {
          video.currentTime = 0
        }
      }
    }, { threshold: 0 });

    observerTrigger.observe(trigger);
    observerVideo.observe(video);
  })
</script>
1 Answers

The problem was solved this way. We removed the 100% width parameter from the video and set the container that contains the video to flex justify-center. And the script started playing the video on Safari correctly.

At some resolutions the video stretched beyond its real resolution and Safari did not want to replay it in the event...

Of course it was strange, but it worked =)

Related