Bug 160685 – Video tags can not be used for input to Canvas/WebGL on iOS

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: Media

[Gregg Tavares]

At some point it seems like Safari on iOS made it so video playback always happens fullscreen.

This is a problem for apps that are trying to use the video a source to a canvas or a webgl texture.

I don't know what problem was trying to be solved here. Maybe it was trying to make sure videos have a nice UX. Unfortunately it seems to have broken apps that use video as an input source like p5.js does often.

Is there any chance this can be fixed? Maybe check if the video is `display: none` and then let it play in the background? Or some new attribute that tells iOS Safari the video will be used for processing and not for direct on screen playback?

Note: people have found one hacky workaround which is as follows

make both a video and audio tag. Set both to the same source. Play the audio tag. Every rAF do `video.currentTime = audio.currentTime`. This magically works but seems very fragile and hacky.

Example http://webglsamples.org/video/video.html

I am using webgl to create a simple pre-viewing for my groups. We are doing scientific visualization and wants to have an idea how our films project to a dome will look like. This bug really affects what I wanna accomplish.

[Jon Lee]

The previous policy allowed inline playback on iPads. Only on iPhones did video playback always go fullscreen. This policy has existed for a very long time, so when you say "it seems to have broken apps" are you saying something very recently broke?

For Safari 10 you can specify that a video should play inline by adding the "playsinline" attribute.

(In reply to comment #2)
> The previous policy allowed inline playback on iPads. Only on iPhones did
> video playback always go fullscreen. This policy has existed for a very long
> time, so when you say "it seems to have broken apps" are you saying
> something very recently broke?
> 
> For Safari 10 you can specify that a video should play inline by adding the
> "playsinline" attribute.

Yes, I am developing that recently. The hacky thing I am doing right now for iphone is that I have to manually set the video.currentTime(It actually doesn't need to have audio tag though). However, I wish I can have a more robust way to do this in previous mobile safari. Is there any way of doing that??
Thanks!

[Kimmo Kinnunen]

If I understand correctly, currently the inline videos work on iPads and iPhones and can be used as inputs for WebGL texImage2D and Canvas drawImage.
Closing this, please reopen if this is not the case or open a new bug if a feature is missing.