Bug 134251 – [iOS] Calling drawImage on a video element causes the controls to appear fullscreen

• Component: Canvas
• Status: RESOLVED WONTFIX

[Ashley Gullen]

Possibly related to: https://bugs.webkit.org/show_bug.cgi?id=133511 (iOS 8 WebGL cannot pass video to texImage2d)

On iOS 8 beta 2, passing a video to drawImage() causes fullscreen video playback controls to appear, and the screen goes black. However the audio from the video can be heard. The video is not added to the DOM, it is simply created in Javascript, played on the first touch, and passed to a canvas2d drawImage() regularly.

As noted in the WebGL bug, in this use case the fullscreen playback controls are unwanted. If the video is closed, it appears it did render to the canvas2d underneath but this could not be seen, and playback is then paused so it does not continue playing within the canvas2d context.

It works correctly in Chrome for Android, and desktop Chrome, IE11 and Firefox.

Observed result:
Blank screen with fullscreen video playback controls

Expected result:
Video playback within the canvas with no playback controls, which is how Chrome for Android works.

[Alex Christensen]

This works as expected on iPad, and it draws as expected on iPhone except the fullscreen controls cover everything.  This is not my domain.

[Radar WebKit Bug Importer]

<rdar://problem/17437530>

[Radar WebKit Bug Importer]

<rdar://problem/17437531>

[Dean Jackson]

Yikes.

[Klaus Reinfeld]

Any news on this bug?
Why is it still not assigned?

Technically it shouldn't be very difficult to fix that bug - either enable the 'play-inline' support in the iPhone Safari (like on the iPad) or don't trigger the 'fullscreen playback' when the video itself wasn't added to the DOM (e.g. when the video has no parent, that's typically the case when showing the video indirectly via Canvas or WebGL).

[Ashley Gullen]

Still reproduces on iOS 8 beta 3.

[Ashley Gullen]

Still reproduces on iOS 8 beta 4.

[MooLee]

Still reproduces on iOS 8.

[TReact]

Still reproduces on iOS 8.3

[Thomas Hansen]

I'm also trying to upload video frames to texture for a webgl based webapp that we'd like to run on iPhones. 

One way I can sort of make it work, is to to decode video streams in javascript using https://github.com/mbebenita/broadway(android h264 decoder > emscripten > js).  But the performance is suboptimal and still needs to be synced to separate audio playback currently.


If someone can point me in the right direction as to where in the source tree I might start looking, I'd be happy to report back anything I can find about this issue.  I have checked out webkit from https://github.com/WebKit/webkit and have it building / running on an iPhone simulator.

I'm currently looking at HTMLVideoElement and HTMLMediaElement, but not sure I have quite figured out whats going on yet...

Thanks!

[Ahmad Saleem]

I am able to reproduce this bug on iPhone 13 Pro Max using iOS 15.6 (Safari 15.6) using following test case:

Link - https://jsfiddle.net/Lhk3d5yu/show

^I took the test case from URL field via Wayback Archive and changed it into above JSFiddle.

I loaded the test case in the Private Window, it showed website for few seconds and then video appearing behind test and then made it go full-screen black and nothing and I have to come out of full screen.

Just wanted to share updated test results. Thanks!

[Youssef Soliman]

The issue here is calling `video.play()` which will automatically fullscreen a video on iOS without the `playsinline` attribute. The workaround for this would be to set `video.playsInline = true` before calling `video.play()`.