Three.js: Video texture example does not work on iOS

[gfodor]

Description of the problem

It seems that the video texture examples do not work on iOS -- I suspect it has to do with the iOS 13 upgrade, but can't confirm at the moment. This example:

https://threejs.org/examples/#webgl_materials_video

now plays the video full screen. Behind the video, it does seem like texture uploads are happening because once you exit full screen, the underlying example has the last played video frame on the texture.

We noticed that videos no longer play in hubs (hubs.mozilla.com) on iOS and so I went to try this example to see if the basic example worked properly.

Three.js version

Version used on examples

Browser

• iOS 13 Safari

OS

• iOS 13

Hardware Requirements (graphics card, VR Device, ...)

iPhone 7

[gfodor]

A user tested on iOS 12 and confirmed the same behavior.

[Mugen87]

Sorry, I don't have an iOS device at hand and thus can't currently debug the issue.

[mrdoob]

This example:

https://threejs.org/examples/#webgl_materials_video

now plays the video full screen. Behind the video, it does seem like texture uploads are happening because once you exit full screen, the underlying example has the last played video frame on the texture.

Any chance you can share a screenshot to illustrate?

[gfodor]

Sure, not much to see tho, it’s just the movie playing full screen

[gfodor]

[gfodor]

and if i close the full screen, i see the example with the cubes, and the last frame of the video on it. (the video no longer playing nor audio)

[gfodor]

[Mugen87]

I had the opportunity today to test with an iPad (5th generation) on iOS 13.2.

now plays the video full screen.

I was unable to reproduce. Safari renders webgl_materials_video as expected without entering full screen. Other video examples like webgl_video_panorama_equirectangular also work fine.

This issue is probably only related to iPhones...

[timothyallan]

Just confirming I get the same broken behavior on 13.1.3 on an iPhone 6s Plus. Wonder if it's an iPadOS vs iOS feature set issue, now that they're two separate packages.

[sciecode]

I can confirm this behavior iPhone 6 - iOS 13.1.2

[mrdoob]

Has this been reported to Apple? We sure didn't change anything.

[sciecode]

From Webkit Blog post \

A note about the playsinline attribute: this attribute has recently been added to the HTML specification, and WebKit has adopted this new attribute by unprefixing its legacy webkit-playsinline attribute. This legacy attribute has been supported since iPhoneOS 4.0, and accordance with our updated unprefixing policy, we’re pleased to have been able to unprefix webkit-playsinline. Unfortunately, this change did not make the cut-off for iOS 10 Developer Seed 2. If you would like to experiment with this new policy with iOS Developer Seed 2, the prefixed attribute will work, but we would encourage you to transition to the unprefixed attribute when support for it is available in a future seed.

I've tested dropping the prefix on the playsinline attribute and it seems to have fixed the issue.

playsinline example

@timothyallan @gfodor can you guys confirm this patch works?

[gfodor]

confirmed on my end, thanks for fixing! we already add playsinline to our
video elements in hubs, so I guess our regression is unrelated to this one.
:(

On Thu, Oct 31, 2019 at 2:15 PM Guilherme Avila [e-mail]
wrote:

From Webkit Blog post

A note about the playsinline attribute: this attribute has recently been
added to the HTML specification, and WebKit has adopted this new attribute
by unprefixing its legacy webkit-playsinline attribute. This legacy
attribute has been supported since iPhoneOS 4.0, and accordance with our
updated unprefixing policy, we’re pleased to have been able to unprefix
webkit-playsinline. Unfortunately, this change did not make the cut-off
for iOS 10 Developer Seed 2. If you would like to experiment with this new
policy with iOS Developer Seed 2, the prefixed attribute will work, but we
would encourage you to transition to the unprefixed attribute when support
for it is available in a future seed.

I've tested dropping the prefix on the playsinline attribute and it seems
to have fixed the issue.

playsinline example
https://rawcdn.githack.com/sciecode/three.js/4609001bebe140d21a96f55d1baf8949754dbaa8/examples/webgl_materials_video.html

@timothyallan https://github.com/timothyallan @gfodor
https://github.com/gfodor can you guys confirm this patch works?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mrdoob/three.js/issues/17757?email_source=notifications&email_token=AABVW5BBGIK6T242XQEELNLQRNDIBA5CNFSM4JB5DGH2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECZIQ6I#issuecomment-548571257,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AABVW5EXY3WZ7LW775PVAN3QRNDIBANCNFSM4JB5DGHQ
.

[gfodor]

fyi, it looks like our issue stems from audio, this radar is in line with what we are seeing: https://bugs.webkit.org/show_bug.cgi?id=203435

[timothyallan]

@sciecode Yep, works with iOS 13.1.2