I have a Flutter application in which I have a webview using
Flutter InAppWebView
I have loaded a url which has radio streams inside and everything works fine, even when I go to background mode or I lock device I can hear the music. The problem is that I don't have any media controls, for example play-pause.
If I open the same link in my phone browser (using Android & iOS), play the stream and locked device I have media controls including art cover.
So my question is, is it possible to add Media Controls in Notification bar if I use WebView inside my Flutter application?
Related
How do I go about embedding Apple's Podcast player in both iOS/Android and web? I would like the embedded player to play audio when pressed on 'play' button as well as size it dynamically (based on MediaQuery).
When I try the WebView widget in Android, I find that it essentially behanves like a small browser window inside the app and I am not able to play the audio at all.
Thanks!
Is it possible to turn on device screencast option from a progressive web app?
Is there any way to customize VideoJS (v. 5) HTML5 player on iPhone?
We created custom elements on top of the player and also custom controls using the createEl() method. Everything looks fine on desktop, mobile (android) and tablets (android and ipad) but when it comes to iPhone the player is falling back to HTML default controls and custom elements are not displayed (see below images).
The player on Android:
The player on iOS:
There is also a portion of code in createEl() method in video.js which tells us something about breaking on iPhone.
// insert the tag as the first child of the player element
// then manually add it to the children array so that this.addChild
// will work properly for other components
//
// Breaks iPhone, fixed in HTML5 setup.
Dom.insertElFirst(tag, el);
this.children_.unshift(tag);
this.el_ = el;
return el;
Any solution for this issue?
The answer is simple: You can not (today, maybe on future) if you are playing videos using the Safari browser on iPhone.
Mobile Safari on the iPhone does not allow videos to play inline, they must always go fullscreen. The iPad will play them inline, though I do not believe they can have overlapping content.
If you want to play inline, you would need to build your own iOS application which has a UIWebView. UIWebView has a property, allowsInlineMediaPlayback, which can be set to YES. When using this on the iPhone, you can then use custom HTML for a video tag which sets the webkit-playsinline attribute.
Check here:
https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html#//apple_ref/doc/uid/TP40009523-CH3-SW20
iOS Note: On iOS, full-screen videos can only display the default controls.
I work on a fullscreen iphone web application using gestures like tap, drag and swipes over the entire webpage. Minimal-ui was the best solution found for this kind of project.
According to Apple Specifications:
The minimal-ui viewport property is no longer supported in iOS 8.
What is the new way to simulate the old minimal-ui behavior?
Here is some information on telling iOS that a webpage is webapp-compatible so users can save it to their home screens and use it as if it were a separate app, with absolutely no safari controls visible.
From the apple developer docs:
A web application is designed to look and behave in a way similar to a native application—for example, it is scaled to fit the entire screen on iOS. You can tailor your web application for Safari on iOS even further, by making it appear like a native application when the user adds it to the Home screen. You do this by using settings for iOS that are ignored by other platforms.
...
On iOS, as part of optimizing your web application, have it use the standalone mode to look more like a native application. When you use this standalone mode, Safari is not used to display the web content—specifically, there is no browser URL text field at the top of the screen or button bar at the bottom of the screen. Only a status bar appears at the top of the screen.
...
Your web application can link to other built-in iOS apps by creating a link with a special URL. Available functionality includes calling a phone number, sending an SMS or iMessage, and opening a YouTube video in its native app if it is installed.
This would enable you to completely hide the safari navigation AND link to other built-in functionality such as placing a phone call or composing an SMS.
I know that allowsInlineMediaPlayback only works on iPad, but my goal is to play the video on AppleTV, while I am displaying some dynamic html content on Safari. I basically want to get rid of the airplay indicator screen or hide it somehow, or open a new tab while the video keeps playing or kind of minimize it display just a small pause button on the bottom of my html page while the video is playing on AppleTV.
If this is not possible to be done on iPhone, can it be done on iPad ? I want to have as much space as possible on the safari page and just a pause button for the video.