[iOS] Video Block doesn't play MP4

[jacoswan]

Describe the bug
Apologies in advance for this less than stellar bug report. In #19322509-hc user reports their MP4 video doesn't play on iPhoneX, Safari and explains:

my mp4 files plays on normal browsers but not on iPhoneX, the browser specifically need an option "playsinline", which I couldn't set when i insert the video.
if i add plays inline on an html i created, it works
but i don't see such option on the WP video plugin options

To Reproduce

Steps to reproduce the behavior:

1. Go to post/page editor
2. Add a video block
3. Add Mp4 video (Autoplay on, Loop on, Muted on, Playback Controls off, Preload auto, no post image, AMP layout default, AMP noloading off)
4. Visit with iPhoneX using Safari. See just an image, no video.

Video specs:
Format: H.264 HD (1-1-1)
Resolution: 1024x768 4:3
Encoded FPS: 30
Data size: 5mb
Data rate: 3.15 Mbit/s

Expected behavior
Expected the video to play, or at least have an option to tap to play

Screenshots
Apologies, none available, don't have the same device to thoroughly test.
Not an issue on Android with Firefox

Smartphone (please complete the following information):

• Device: [e.g. iPhonex]
• OS: iOS version is 13.3.1 and iPhoneX

Couldn’t get the safari version

• Browser: Safari

Additional context
Followed up in #2781652-zen

[hypest]

Interesting, can you have a look @guarani to see if we can replicate this and how hard would it be to have the specific attribute available? Thanks!

[guarani]

Can I Reproduce?

Yes, I could reproduce the bug. I added a video to a post using the Gutenberg editor on the WordPress for iOS app, and followed the steps outlined in the bug report above. The result is that upon viewing the post in Mobile Safari, the video doesn't automatically play and there's no option to start to play it.

Cause(s)

On WordPress.com, the playsinline attribute is missing (when using a video hosted on WordPress.com a.k.a. VideoPress) – it's not found in the video block's settings panel. The attribute is present on the WordPress for iOS app, but there is a bug where the attribute is not saved by the server. This means that if you open the post afterwards, the playsinline attribute is no longer checked (switch is off).

For completeness, on a post in WP.com, I added an externally hosted video and checked the “Plays inline” checkbox (which appears for externally hosted videos). I then opened the post in mobile Safari (as expected, it didn’t auto play) and then inspected the

I noticed that even if playsinline is manually added on WordPress.com to the block by the user using the code editor, it's removed as soon as the post is saved.
(This attribute is available on WordPress.org – I replicated on a local WordPress.org installation – it was added and merged here).

To Note

Although the user is on mobile, I think some of their actions take place on WordPress.com (via Safari) and others on the WordPress for iOS app. It's also worth noting that the way the user wishes to setup the video (autoplay, looping enabled) is a very common pattern for playing videos as gifs.

Next Steps

I will follow up on the bug linked to above because that will allow users to add the playsinline from the mobile app. I will then check why the WordPress.com site doesn't display the attribute in the video block settings, as this affects mobile users who opt to use the responsive website instead of the app.

[guarani]

Update: I've added a feature request on the wp-calypso repo to support playsinline. This will allow users to access the "Plays inline" checkbox on the responsive website.
I'll update again after creating a feature request for the REST API, as that will allow us to add support on the mobile apps.

[guarani]

Removing myself as assignee since I'm not working on this at the moment.

[igotdes]

Also reported in #5176537-zen. The issue can be seen when viewing this page (private).

I was able to replicate the issue on an iPhone SE (2022) with both Chrome and Safari. The mp4 plays just fine in Slack. Here's some more information on the video, if it helps:

• Dimensions: 1280 × 720
• Codecs: AAC, H.264
• Color profile: HD (1-1-1)
• Audio channels: Stereo

[SiobhyB]

Fixed in Automattic/jetpack#35637.