I am building a mobile web app that will integrate with a live video stream. The streaming stuff is all handled by a third party so I don't need to worry about that aspect.
What I get from the third party is an iFrame/video element to drop onto the page. I am curious if there is a way to have this video play in the background while the user can interact with a UI over top.
I am aware of the limitations involving mobile browsers and autoplay, so I know that at the very least the user will need to initiate an action. I am just worried that the native video player will pop up and the UI will be hidden beneath it.
So my primary question would be is this even possible?
A little google search would have given you an answer
http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video
Related
I want to ask about YouTube Required Minimum Functionality. Our development team wants to integrate YouTube player in mobile application, using iframe and react-native-webview.
Terms of services says that "You must not display overlays, frames, or other visual elements in front of any part of a YouTube embedded player, including player controls. Similarly, you must not use overlays, frames or other visual elements to obscure any part of an embedded player, including player controls." We are not planning to hide or obscure any part of player.
But can we prevent users from interacting with the YouTube player? For example, we want to prevent video sharing by wrapping the YouTube player in a component with touch actions disabled. But the user will still have the ability to control the video (stop, play, fast forward).
I'm trying to open a YouTube playlist from a tabBar, allow the user to play a video, but I want the user to be able to pause the video, go back to the app and resume to the video when they re-open that tab.
Is this possible in SFSafariView or UIWebView?
First, UIWebView has been deprecated so you should look into WKWebView.
The main difference between SFSafariViewController and WKWebView is how much control you want to keep on the web experience.
From Apple Guideline Should I use WKWebView or SFSafariViewController for web views in my app?, you can use SFSafariViewController when you want Safari web experience embedded within your app. Although you'll have a very limited control of it: caching or user session isn't part of it. That being said, if the web page handles an authentication system with user session, you could potentially recover it using ASWebAuthenticationSession.
On the other side, WKWebView allows you much more customisation and hands on for the web session and navigation. This is probably what you're looking for if you want to keep control of user's navigation.
As many hybrid app developers know, Apple has decided to disallow setting the volume property of HTML5 video elements in JavaScript. This also amounts to the the muted property. The concept of muted videos which autoplay when scrolled into view and with the option of unmuting on tap is growing increasingly popular (pioneered by Vine, Facebook, etc.). I'm trying to find a way around this limitation in design. From what I've been able to read on the subject, there's not any hack or solution that solves this design requirement of mine.
Here's my thoughts so far:
I could split the audio from the video into a separate stream and sync current time with the video and call play() when the user is tapping. However, iOS Safari/UiWebView does not support simultaneous audio/video streams. Thus, this is simply not an option.
I could encode two videos, one with sound and one without. I could then swap the src on tap. However, this requires reloading the entire stream and also nearly doubles the amount of data required. The latency is noticeable. Thus, this won't be a viable solution.
I could embed a native AVPlayer class element in the webview. However, this would be an overlay and not be manageable from within the webview. Custom controls and UI interaction from within the dom would not be possible. Thus, this is not an option.
I could simply disable the output of the app and dynamically switch it on whenever the user taps a video element. However, to my knowledge this is not possible. I could show the native software volume slider, but that would defeat the purpose of this whole thing.
Do you have any suggestions or ways around this limitation?
I managed to find an acceptable solution. I split the videos into three files. One without audio, one without video and then one with both video and audio for desktop browsers/Android.
It seems like running simultaneous streams CAN work as long as they doesn't conflict with each other, which basically means a separate audiotrack and a video with no audio Channels play just fine in unison.
When I go to m.youtube.com on my iPhone (Chrome) to watch videos, I assume that YouTube is using the HTML5 <video> tag to display them.
However, when I watch a video with a commercial, dragging the seek button makes it jump back to it's original position before the seek. In other words, it is impossible to control your position in the commercial.
It feels like a violation of the divide between browser content and the browser. This isn't a native app, it is a website. How are the iOS video control elements being manipulated by HTML? It seems that this should be impossible, just like it should be impossible for a webpage to access a phone's photos or switch applications.
If it's running inline in the browser, the site will have full script access to the controls - and it's very standard nowadays to prevent skipping/changing the playhead during ads. Some even get rid of the controls completely.
Though HTML5 video is a native browser function, it's still subject to javascript hooks. All one has to do is add return false to the onChangePlayhead event to lock the controls down. It's only when you remove the video from inline web and bring it into the native iOS app that it becomes untouchable by scripts.
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.