CODEWITHSUNDEEP
javascriptjqueryhtmliosiphone
user10629012
user10629012

Reputation: 309

Autoplay video IPhone low power mode not working

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?

Upvotes: 12

Views: 15663

Answers (5)

Tinkuuu
Tinkuuu

Reputation: 9

Was researching about that recently and apparently you can check it in promise as stated here

Upvotes: -1

pianoboy
pianoboy

Reputation: 11

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

Upvotes: 1

V&#237;t Zadina
V&#237;t Zadina

Reputation: 562

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> )

Upvotes: 0

RCNeil
RCNeil

Reputation: 8779

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"); 
});

Upvotes: 4

paulcol.
paulcol.

Reputation: 3000

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
});

Upvotes: 4

Related Questions