Bug 149386 - When I check document.webkitFullscreenElement it always returns undefined if I have a video object in fullscreen. It should return the video element.
Summary: When I check document.webkitFullscreenElement it always returns undefined if ...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Media (show other bugs)
Version: WebKit Local Build
Hardware: iPhone / iPad iOS 9.0
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2015-09-20 05:07 PDT by Raul Jimenez
Modified: 2015-09-22 11:42 PDT (History)
2 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Raul Jimenez 2015-09-20 05:07:41 PDT 
Steps to Reproduce:
1. Open http://codepen.io/flower/pen/RPWXOw
2. Click fullscreen button.
3. Click play.

Expected Results:
It should shows an alert with a message "isFullscreen: true".

Check our API for fullscreen for code details:
https://github.com/2fdevs/videogular/blob/master/app/scripts/com/2fdevs/videogular/services/vg-fullscreen-api.js

Actual Results:
It shows an alert with a message "isFullscreen: false".

Also not working in at least iOS 8.3 [12F69].

Configuration: iPad Mini 16GB WiFi
Comment 1 Jer Noble 2015-09-21 13:56:30 PDT 
The Fullscreen API (and thus document.webkitFullscreenElement) is not supported on iOS.
Comment 2 Raul Jimenez 2015-09-22 06:15:43 PDT 
(In reply to comment #1)
> The Fullscreen API (and thus document.webkitFullscreenElement) is not
> supported on iOS.

Extracted from Apple documentation:

"The document.webkitFullscreenElement property contains the element that is in full-screen mode. Check if this property is defined to determine if the user is currently in full-screen mode. The document.fullscreenEnabled property detects whether the browser supports the full-screen API, not whether an element is currently full-screen."

https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html
Comment 3 Raul Jimenez 2015-09-22 06:24:14 PDT 
(In reply to comment #2)
> (In reply to comment #1)
> > The Fullscreen API (and thus document.webkitFullscreenElement) is not
> > supported on iOS.
> 
> Extracted from Apple documentation:
> 
> "The document.webkitFullscreenElement property contains the element that is
> in full-screen mode. Check if this property is defined to determine if the
> user is currently in full-screen mode. The document.fullscreenEnabled
> property detects whether the browser supports the full-screen API, not
> whether an element is currently full-screen."
> 
> https://developer.apple.com/library/safari/documentation/AudioVideo/
> Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/
> ControllingMediaWithJavaScript.html

Ok, that seems the Safari Desktop reference, not Safari iOS reference.

Then, it's not possible to detect if a video element is in fullscreen mode with JavaScript?
Comment 4 Jer Noble 2015-09-22 07:38:31 PDT 
On iOS, you can use video.webkitDisplayingFullscreen, which predates the HTML5 Fullscreen API.
Comment 5 Raul Jimenez 2015-09-22 11:42:09 PDT 
(In reply to comment #4)
> On iOS, you can use video.webkitDisplayingFullscreen, which predates the
> HTML5 Fullscreen API.

It worked perfect, thanks :)