I am creating a game that uses <video> tags that needs to autoplay videos. The logic of the game goes as follows:

  1. On page load, a video (with audio) autoplays, ranging from 3 seconds to 30 seconds in length
  2. After the video ends, a box pops up that prompts user to click on an answer ('yes' or 'no')
  3. After clicking on 'yes' or 'no', a short 2-3 second video (with audio) reward plays.
  4. Another video (with audio), also ranging from 3 seconds to 30 seconds, immediately autoplays after the reward video finishes playing.

Steps 3-5 are repeated.

On Chrome, Safari and Firefox for desktop browsers, and Chrome for Android, these steps work as expected. However, for Safari and Chrome on iOS 11 devices, these videos fail to autoplay.

I have implemented the following code snippet from https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/:

    var promise = document.querySelector('video').play();

    if (promise !== undefined) {
        promise.catch(error => {
            // Auto-play was prevented
            // Show a UI element to let the user manually start playback
        }).then(() => {
            // Auto-play started

However, this workaround is not ideal as it affects user experience (i.e. having to click a button every time to make a video load). Ideally I would like to whitelist the website to autoplay all videos on Safari and Chrome on iOS. I know this works on desktop browsers (to whitelist websites to autoplay videos) but would this be possible on browsers on iOS?

migrated from superuser.com Jan 2 at 19:25

This question came from our site for computer enthusiasts and power users.

You must log in to answer this question.