I have a video which is integral to my design and on load the video plays on all devices except IPhones while in low power mode. Using the autoplay attribute the video will start on load in most browsers.

<div class="footage">
    <video width="320" height="240" autoplay muted playsinline loop id="videoMob">
        <source src="./img/video.mp4" type="video/mp4">
    </video>
</div>

After finding out that this did not work I decided to add a .ready function in jquery which activates the video to play if paused on load. Disappointingly this also did not work.

$( document ).ready(function() {
    var video = $('#videoMob')[0];
    video.paused ? video.play() : video.pause();
});

Please suggest any other ideas?

I have a video which is integral to my design and on load the video plays on all devices except IPhones while in low power mode. Using the autoplay attribute the video will start on load in most browsers.

<div class="footage">
    <video width="320" height="240" autoplay muted playsinline loop id="videoMob">
        <source src="./img/video.mp4" type="video/mp4">
    </video>
</div>

After finding out that this did not work I decided to add a .ready function in jquery which activates the video to play if paused on load. Disappointingly this also did not work.

$( document ).ready(function() {
    var video = $('#videoMob')[0];
    video.paused ? video.play() : video.pause();
});

Please suggest any other ideas?

• javascript
• jquery
• html
• ios
• iphone

• Can you check the following video under similar conditions ? w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay – humblePilgrim Commented Jan 27, 2019 at 12:26

4 Answers 4

Came across this too, and found that iOS uses the suspend event (https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event) on low-power-mode. This event actually occurs after the video has loaded the few frames and emmited some on load events.

Using this suspend event we're able to show a fallback UI. For safe measure we can revert this UI if the video ever plays again, say on user interaction.

const videoElement = document.getElementById('myVideo');

videoElement.addEventListener('suspend', () => {
  // suspended loading. Show play UI..
});

videoElement.addEventListener('play', () => {
  // remove play UI
});

The answer from @paulcol. wasn't working for me as the suspend event fired every time... not sure why. On browser, on mobile, low-battery, full batttery, it always fired.

Below is a snippet which relied on the play() function not working (if the battery was low, for example) and adds the controls UI to the video if it doesn't...

<video id="myVideoID" preload="true" muted playsinline autoplay>
    <source src="..." type="video/mp4" >
</video>   

const videoElement = document.getElementById('myVideoID');
videoElement.play().then(() => {}).catch((error) => {
    videoElement.setAttribute("controls","controls"); 
});

You can play a video in Safari without audio like this:

<img src="./img/video.mp4">

More information link: https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari

RcNeil solution worked. There is code for react fix. You don't need then function, you can just catch the error and show controls.

 const videoCurrent = useRef<HTMLVideoElement | null>(null);
 useEffect(() => {
    if (videoCurrent.current) {
      videoCurrent.current.play().catch(() => {
         if (videoCurrent.current) videoCurrent.current.controls = true;
      });
     
    }
  }, []);


...
return ( 
<video ref={videoCurrent} preload="true" muted playsinline autoplay>
    <source src="..." type="video/mp4" >
</video> )