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!
Related
I am making a video streaming application. I want my application to show the video player in a tiny window when the app is minimised while playing like amazon prime app.Is there any way to implement this
This feature is known as pictures in picture mode. I used this plugin pip_flutter to implement this feature.
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?
I have just implemented taking videos with the camera plugin on Flutter Web. After I stop recording, there's no way to show the users the video they have just recorded. The video player plugin won't play files on Flutter web, is there any other way to go about this?
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 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.