iframe AbortError on iOS when calling play() on background videos

[ndimatteo]

trafficstars

Expected Behavior

In a React environment, autoplaying and pausing iframe background videos (Plus account) when in view using the play() and pause() methods.

Actual Behavior

On iOS (Safari and Chrome) the videos sporadically do not play when calling the play() method. Instead, it catches and throws the following error:

AbortError: The operation was aborted

The video is on a Plus account, it has no audio track, and it has the background=1 query param. Also tested with adding muted=1 and autoplay=1 for safe measure but it still catches with the above error intermittently.

Steps to Reproduce

You can see this in action here when loading up on iOS using Safari or Chrome (try refreshing a few times): https://www.cotenyc.com * close the pop-up and observe the video background at the top of the page

Here is the associated component that holds the functionality for this iframe: https://gist.github.com/ndimatteo/6c6df45bfc262eb4719f74c407487b6d * Line 19 is the function that calls play() and is referenced in the useEffect() once the API is initialized

I hope that helps, thanks so much! 🤘

[bdougherty]

Looks like that page is no longer using the Vimeo Player. If you still have a way to set up a new example page, please re-open the issue and we can take a look.

[ndimatteo]

@bdougherty the original page can still be found here: https://cote-nyc.vercel.app

I can't re-open the ticket, but pretty bummed that this went unanswered for over two years and ya'll just close it, even though I shared the code showing the complete setup 😞

I've since moved on to just using the file urls for Dash/HLS/MP4, but would still love to have the option to just use the iframe embed. Let me know what you think!

[bdougherty]

Sorry! I'm just trying to clean up the repo after having been mostly neglected for a while. Most things aren't valid anymore and unfortunately I don't have the time to give everything a full examination. I know it's not the greatest situation, but I hope you can understand.

[kaeruB]

I would appreciate a further investigation on this issue since it seems like it's not possible to use the play() function especially on mobile devices (I checked on iPhone's Chrome and Safari). It seems like if you execute a play on not-muted video, there will be fired the pause events - thus the video will be stopped immediately after executing play.

You can see on console log that after a play event - there are numerous pause events fired thus the video is not played in the end:

A note for other library's users experiencing the same problem:

• I have started an inquiry with Vimeo Support, hopefully it gets fixed 🙇🙏
• As support side wrote: "It’s likely that the library fires the pause events to stop any autoplay behavior due to browser restrictions (especially on mobile). Browsers, especially on mobile, tend to be strict about autoplaying videos, often requiring user interaction for videos to play automatically. This could also be influenced by changes in browser policies regarding autoplay since around May 2023."
• On PC you can workaround it with small setTimeout trick, but on mobile it seems like it's not the case.
• If you mute the video before executing play function - then the video should play as expected (but you cannot unmute it again after play is executed - it will stop again firing pause events. A user action is needed anyway to unmute it...)

[rkrishnan8594]

The browser may pause playback of your video if you attempt to autoplay or programmatically play it without it being muted. If you're able to reproduce cases in which playback is paused when calling player.play() even after muting the video, then this it be a legitimate bug.