I am using embedded YouTube videos in my React Native Expo application. The embedded videos are inside a WebView from react-native-webview. I am having a bit of a weird problem and I am not sure if it is on the YouTube side or React Native side of things.
When I try to click the play button on Android, I get the developer options on the YouTube video. The video does not play and I cannot "click out" of these options.
What the YouTube Embedded Video looks like inside the WebView when I press play
Even though I am clearly clicking in the center of the player on the play button, I get this menu. It seems like the Webview is either not responding well to user touch input or it thinks it is a longPress. I am not long pressing the video. When I strip my UI down to just the WebView taking up the entire screen, it works fine. On long press, I see this menu pop up. But clicking the play button everything works as expected.
It seems like once I reduce the size of the WebView (even though the YouTube player is not cut off or squished at all), it isn't responding properly. On iOS, everything is working fine.
Device Problem Occurs on
When I started to test on the Samsung Galaxy S7, I noticed this problem. Running the application on a Google Pixel 3 emulator appears to work as expected.
Here is the simple WebView with embedded YouTube video in it.
<WebView
allowsInlineMediaPlayback={true}
source={{ uri: "https://www.youtube.com/embed/WOi0vnzcEzA?playsinline=1&rel=0&mute=1autoplay=1&fs=0" }}
/>
Thanks
I ended up figuring out what was going on. I hope this may help someone in the future.
My WebView was wrapped inside a TouchableWithoutFeedback. For some reason (it is probably correct behavior but over my RN capabilities), it was "blocking" proper user input into the WebView. After I moved the WebView outside of the TouchableWithoutFeedback, everything worked as expected.
Related
I created an Android App which loads a webpage via Webview into the app so you can access the content on a mobile device. On the webpage, I have placed a radio player using iframe and it works. But when I try to click on it to play in the app, it doesn't work. The play button isn't responding at all. If you can point me in the right direction, I would be glad.
The webpage in question is zeno.fm/repjesus-radio, incase you would like to have a feel of the player.
I have a Youtube Player in my Android app and I suddenly got a complaint from a customer that the full screen is not working anymore. So I checked my app and yep! The place where the 'full screen' button (bottom-right) should be, is now a cogwheel, which shows information about the video.
Did anyone else notice this/have this issue? I think I will need to handle the full screen now myself, or is it possible to force this button back?
I'm developing an app with html, css and javascript which i port trough Phonegap to play on an Android tablet. (android 2.3.1 Gingerbread)
Everything is working fine, except the Youtube embed.
If i place the iframe embed on my page there is no play-button above my youtubescreen, so the user does not know he has to press it. But if you press it, the movie loads into the external android video playing app.
But here's the second problem; when the movie ends, the external android player closes and returns to my app, but then my youtube video screen is black en has these ugly android videocontrols of the external player.
But i can't do anything with it... so the user can't press the movie to watch it again.
Does anybody know how to implement a youtube video correctly into an HTML based android application?
It's HTML, so webviews, videoview, intents and things won't work...
Things i tried:
iframe embed
object embed
html5 video embed
online embed on external page
but in every attempt, those ugly videocontrols keep popping up after the video ended.
I also tried another player, but with the same result... Anyone ideas? :-)
I am developing a web page that uses the HTML5 video tag. When I load the page in my ASUS eee pad transformer in the default browser I see a grey area with an icone in the middle instead of the video.
I then have to click in the video area for it to load and only then it is possible to play the video.
This only happens in the default browser. I have tried it on Chrome, Firefox and Opera and it always worked without me having to click the video area for it to load.
My question is. Why is this happening and is there anyway I can correct the issue?
I have tried using the atributes autobuffer and preload.
UPDATE:
I manage to make a workaround. I used Javascript on the page load and the video not only loads but also plays. So the problem where I would see a grey rectangle in which I would have to click to load the video is solved.
There's nothing you can do I'm afraid, the default Android browser is incredibly fiddly with HTML5 video and you're lucky that you can play it at all!
I would like to know if theres any way to open a webview with a stream flash video on fullscreen.
Right now ive the link of the page. This page has some stuff and a flash video. So i wonder if it would be posible to open the webview only with the stream video. In fullscreen or focused on it, without seing anything else. I mean, only the webview with the video, or the whole page, but with the view focused and zoomed so that i could just see the video.
Also, since there could get different kind of web pages, the video could come on different ways. But for now, would be enough to know if it would be posible to open it on fullscreen.
Thanks.
This may apply to the Android platform, but I think that for web-browser Flash Player - in order to go to full-screen, it requires a user action (like a button click) to initiate the transition. This means that the SWF cannot by itself initiate the transition.
I suspect that it applies to Android too. Are you writing and AIR app or a browser-based webpage.