Three years ago a user asked about this. I'm developing an Electron app. The app runs at fullscreen, but I cannot use fullscreen for video and the app at the same time. This is what the user asked here:
Now electron supports fullscreen by actually fullscreen the whole app.
I wonder if there is any way to handle requestFullscreen differently
so that the video takes all the space of the window, but the window
itself doesn’t change.
This problem made me open this stackoverflow post, so the answer to this question would solve the post's one.
The player has enterFullWindow() and exitFullWindow() methods which cause the player to fit to the window.
Related
My research tells me that there is now way to escape fullscreen video viewing in iOS browsers on iPhone or iTouch. It also seems there there is no way to modify the native controls that are displayed along with the video. Is the user in a total blackbox while viewing video in this case?
I'm trying to find someway for a user to indicate that they like a video as it is playing. Is there anything I can do that isn't a hack? If not is there any indication from Apple that they will ever be willing to change this? I'd rather not make an app out of this project.
You actually can play a video in line on an iOS browser, if this is what you are aiming for although there are restrictions - updated answer:
Play video inline in a browser on iOS
Safari on large screen iOS (iPad) should support inline video (I don't have iPAD hand to verify this still works...).
Safari on 'small screen' iOS (i.e. iPhone) will not support inline video as standard. There is at least one workaround which will allow it but this does bypass much of the native video playback performance gains so it may not meet your needs. It is a work in progress still as you will see from the link, but try the demo on an iPhone browser - you need to hit the small play button beside the video, rather than the one on top of the video at the time of writing:
https://github.com/newshorts/InlineVideo
Playing inline in a UIWebView on iOS
Take a look at this Apple Developer page:
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIWebView_Class/index.html#//apple_ref/doc/uid/TP40006950-CH3-SW31
In particular:
allowsInlineMediaPlayback
A Boolean value that determines whether HTML5 videos play inline or use the native full-screen controller.
and:
Discussion
The default value on iPhone is NO.
In order for video to play inline, not only does this property need to be set on the view, but the video element in the HTML document must also include the webkit-playsinline attribute.
As I keep reading, there is no way to enable HTML5 video autoplay in iOS browsers.
So why does my older iPad (with iOS 8) autoplay this introductory video from e.g., http://www.apple.com/ipad-air-2/ ?
When inspecting this on desktop Chrome, I pause at a certain point and see that a script inserts a <video> element with a mp4 file, then removes it after animation finishes. I've examined their script file as well, but did not find a definite answer to this.
I wish to clarify that I do not initiate any action other than opening the url. I have purposefully avoided every contact (no tapping, touching, etc.).
Could someone with more video experience explain this?
This question has been answered to me in a different place, so if someone stumbles upon this later on...
The short answer is that Apple does not show a video on a device such as iPad. They flash a series of JPEG images like a filmstrip, making it appear as though a video is being played. For a desktop browser, they would show a video file though.
My app uses AVQueuePlayer to show video clips back to back. In testing on my AppleTV, it seems that when I switch to the next video in the queue, there is a small time gap where the Apple TV 'takes over' the screen and the home screen of the Apple TV is displayed. Is there any way to prevent this gap from happening, even a black screen or loading indicator would be a better experience.
I was having this exact same problem and was dismayed when I saw that no one had yet to find an answer.
The solution I ended up going with involved taking advantage of the multiple display support added in iOS 5. There are some helpful links in learning how to do this here:
https://developer.apple.com/library/ios/documentation/WindowsViews/Conceptual/WindowAndScreenGuide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40012555-CH1-SW1
http://blog.redfin.com/devblog/2012/05/creating_a_dual-screen_airplay_experience_for_ios_and_apple_tv.html#.UjCe5mRATZY
The app I am designing will basically look for the availability of an external screen. If it finds one it will play the videos on the viewcontroller I provide for that external screen. That viewcontroller can have a black background so that any pause in between videos looks natural and no longer has the Apple TV home screen pop into view for a moment.
The HTML5 <video> tag offers the user a button to toggle on and off the fullscreen mode on Safari for mobile devices (iOS).
I would like to capture and handle this user action but it doesn't seem to raise an event when the button is pressed and the player enters the full screen mode.
Here is the link to the Safari API for the HTMLVideoElement class:
https://developer.apple.com/documentation/webkitjs/htmlvideoelement
We can easily find out when the video is paused of played in Javascript, like this:
function onload()
{
var player = document.getElementsByTagName("video")[0];
player.addEventListener('play',videoPlayHandler,false);
player.addEventListener('pause',videoPauseHandler,false);
}
However they don't seem to have any events for when the video enters the full screen mode.
We can force the video into fullscreen mode in response to user action by calling the webkitEnterFullscreen(), but that doesn't help me. I need to know when the user taps on the fullscreen button.
Hiding the controls and replacing them by my own custom controls sounds like a really long winded solution.
Another option I can think of is to set a timing event, constantly checking for the webkitDisplayingFullscreen property, but that feels like a bad thing to do in terms of memory management.
Can anyone suggest a better solution?
After much faffing around a friend finally pointed me in the right direction.
The events I was looking for are: webkitbeginfullscreen and webkitendfullscreen
var player = document.getElementsByTagName("video")[0];
player.addEventListener('webkitbeginfullscreen', onVideoBeginsFullScreen, false);
player.addEventListener('webkitendfullscreen', onVideoEndsFullScreen, false);
With that I can safely capture when the user clicks over the fullscreen button on Safari for the iPads. Interestingly the same events don't seem to work for Safari on the iMac (tested on version 5.1.2).
Thanks Apple for their inconsistency and hours of wasted time.
I am writing a web app that uses HTML5 audio. I want to make sure that the user can move to a different application while still listening to the audio in the background. This works while the web app is still within Safari itself. However, when the user adds the web app to their homescreen and it has been set to allow for fullscreen access (no Safari toolbars), when they leave the app the audio does not continue to play. Does anyone know of any way to have a web app proceed while in the background?
Thanks.
I observe exactly the same thing. It's really puzzling as to why Safari, webkit on iOS I suppose really, handles it differently in the two cases.
I notice one thing that might be a small clue, when running as a home-screen'ed 'app' when you playback the audio the iOS status bar (at least on my ios4.1/iphone4) does NOT show playback indicator (blue triangle). But when using the site directly via Safari (and the sound stays in the backgroun as expected) it DOES show the playback indicator.
I think the only people who can probably answer your question are apple since it's their webkit implementation. If you haven't already I would urge you to take this up on the apple developer message boards.
For others not familiar the 'full screen access' Dan is referring to is a Safari specific meta tag that enables a bookmarked web page to open in safari 'full screen' without the location and menu bars.
While HTML5 is making progress on supporting device native features through HTML 5 APIs (such as accelerometers, etc) having true background audio seems like it hasn't really been spec'ed out yet. By background I mean when the browser is not the application that the user is currently focused on. It was only more recently that iOS even supported application multitasking which is what making the behavior from safari possible but it's a separate thing together to integrate that tightly with the OS'es native audio control features, which is what would need to happen.
This is not possible, at least not currently. You are playing the audio from the browser and when the browser closes the system kills the app, or freezes it, unless it has multi-tasking support(but that isn't allowed for web apps)
In iOS 5 and Android 4.0.3, putting a browser window to background does not stop playback. I am not sure about other versions prior to them.
You can do so with an iPhone 4. On my website, I posted a song with the simple html5 tag and I went on it with the iPhone 4. Played the song, left the app. Song runs in the background and there is even a play button on the top bar like when you listen to music on the iPod app.