Html Question posted in
Some basic documentation can be found here.

Html – Safari browser shows the play button/does not autoplay for background video in Version 17.2.1

I had made a background video for my website which worked on all browsers. But there seems to be some kind of issue with Safari browser Version 17.2.1. By default that video will be stopped and the play button will be visible (Which is not the case for other browsers).

Please check out the below snippet (Please Open it in full page for better understanding):

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}
<!-- The video -->
<video aria-label="background-video" aria-hidden="true" preload="true" role="presentation" muted loop playsInline autoPlay id="myVideo">
  <source src="https://dl6.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm">
</video>

<!-- Optional: some overlay text to describe the video -->
<div class="content">
  <h1>Heading</h1>
  <p>Lorem ipsum...</p>
</div>

I have given all the properties suggested by others in the community muted loop playsInline autoPlay but it does not seem to work for Safari browser Version 17.2.1.

tldr; How can i fix the issue where background video will show the play button and remains paused (doesn’t autoplay) at the beginning (only on Safari browsers)?

Edit : I just found out that this problem occurs only when the system is in Battery saver mode

If you have safari browser you can open this question (Run the code snippet) and compare it with either chrome or Firefox browsers.

There are other major websites that are facing this issue if someone needs the list i can provide them too? it’s a major one

Tags:

2

Answers


  1. 0

    Safari might have limitations when it comes to autoplaying media, especially when it comes to conserving battery life. Its Apple, you know how they can be, and Safari is one of the weirdest browsers I can find on the internet.

    To ensure videos play correctly in Safari, you may need to integrate JavaScript to manage autoplay functionality. Here is a simple example of how this can be achieved:

    document.addEventListener('DOMContentLoaded', function() {
  var video = document.getElementById('myVideo');
  
  // Check if the video can autoplay
  var promise = video.play();
  
  if (promise !== undefined) {
    promise.then(function() {
      // Autoplay started successfully
      console.log('Autoplay started');
      // Hide play button and allow user interaction to start playback
      // video.controls = false;
    }).catch(function(error) {
      // Autoplay was prevented
      console.log('Autoplay was prevented:', error);

    });
  }
});
    #myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}
    <!-- The video -->
<video aria-label="background-video" aria-hidden="true" preload="true" role="presentation" muted loop playsInline autoPlay id="myVideo">
  <source src="https://dl6.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm">
</video>

<!-- Optional: some overlay text to describe the video -->
<div class="content">
  <h1>Heading</h1>
  <p>Lorem ipsum...</p>
</div>

    If you want to hide the controls you can do that by setting the controls attribute to false on the video tag like this <video controls="false" …>
    or via javascript as i commented in the snippet above.

    Also check the browser media autoplay permissions as @james-ashok mentioned in his comment.

    Login or Signup to reply.
  2. 0

    The issue you’re encountering with the autoplay video not starting in Safari, especially when the system is in Battery Saver mode, is tied to the browser’s policies regarding media playback to conserve data and battery life. Here are a few strategies you can implement to improve the behavior of your autoplay background video in Safari:

    1. Use JavaScript to Detect and Play:
      Since Safari may block autoplay when in Battery Saver mode or under certain conditions, a good workaround is to use JavaScript to initiate playback once the page loads. This can also help in handling any exceptions if autoplay fails:

      document.addEventListener('DOMContentLoaded', function() {
    var myVideo = document.getElementById('myVideo');
    function playVideo() {
        myVideo.play().catch(e => {
            console.error('Error attempting to play video:', e);
        });
    }
    if (myVideo.paused) {
        playVideo();
    }
    myVideo.addEventListener('click', playVideo);
});

      This script tries to play the video after the DOM content has loaded and also attaches a click event to handle manual play if the autoplay fails.

    2. Visibility Change Event:
      Sometimes, videos may not autoplay or may pause when the tab or window is not in focus. Adding an event listener for the visibility change can help resume playback when the user returns to the tab:

      document.addEventListener('visibilitychange', function() {
    var myVideo = document.getElementById('myVideo');
    if (!document.hidden && myVideo.paused) {
        myVideo.play();
    }
});

    3. Check Autoplay Policy:
      In Safari’s settings (or any browser’s settings), there might be an option that disables autoplay by default, especially when in low power mode. Although you cannot change user settings through your code, being aware of this can help in creating fallback content or instructions for users on how to manually start the video.

    4. Providing User Controls and Indications:
      If autoplay does not work due to browser restrictions, providing user controls or at least a play button overlay can be a user-friendly approach. Users can then start the video manually. This is important as it respects the user’s choice and browser settings:

      <button onclick="document.getElementById('myVideo').play()" id="playButton" style="position: absolute; right: 50%; bottom: 50%; transform: translate(50%, 50%);">Play Video</button>

      Hide this button with JavaScript when the video starts playing.

    5. Test Across Devices and Modes:
      Since you noticed that the issue occurs specifically when the system is in Battery Saver mode, testing your website on different devices and under different conditions (like Battery Saver mode) can provide insights into how widely this issue might impact your users.

    Implementing these suggestions can help mitigate the autoplay issue in Safari, especially under restricted conditions like Battery Saver mode. This approach aims to balance functionality with user preferences and browser restrictions.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search