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!
Related
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.
I am adding an iframe to display a video from youtube, the video appears fine and responsive across all devices except on android mobile chrome browser.The video appears for a second then disappears. On inspecting the element in chrome developer tools I can actually see that the Div that contains my iframe becomes empty after a second.
I have tried putting it in the flex video container provided by foundation (the site is using zurb foundation for responsive design) but still the issue persists, in fact no iframe video container is staying for more than a second. Any help is highly appreciated.
I have red these questions, but none of them solve my issue
AngularJS: Embedding Youtube videos in iframe does not work on Android Chrome
youtube video quickly disappears
Why is my iframe video disappearing?
I dont have rights yet to post an image so i am sharing the snapshot here.
http://i61.tinypic.com/vfwjnk.png
The fullscreen-video-container in the class of the div which holds the iframe. You can see the div becomes empty after a second.
The console has no errors
This was the first post I found on the topic. Ran into this just the other day. I had the embed URL variant so I was confused. This is all very simple. Realized it was a WordPress plugin trying to do tricky things with regex and handling it's own embed trickery. Disabling the related plugin made things work.
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 have a requirement to play YouTube video content from within an Android application on Google TV. Specifically, we'd like to play it from within a Webview inside a Google TV app. This works on Honeycomb devices (3.1), but does not work on GTV.
Here is the video we are testing with, and how we are linking it via a URL that is loaded into a Webview:
<iframe class="youtube-player" type="text/html" width="400" height="285" src="http://www.youtube.com/embed/u1zgFlCw8Aw" frameborder="0">
The page we are loading in the Webview also WORKS fine when using the regular Browser app (the video plays there, embedded via an iframe, just fine!).
Here are the Webview settings that we are using:
web.getSettings().setJavaScriptEnabled(true);
web.getSettings().setPluginState(PluginState.ON);
When loading the same URL that works in the Browser app from our own app, via a Webview, it fails. The screen shows the initial YouTube video in the box with the controls, but when play is pressed the box turns to plain black and no video plays. SOMETIMES audio plays, but never video.
Logcat shows:
E/libEGL(14956): call to OpenGL ES API with no current context (logged once per thread)
D/ShaderProgram(14956): couldn't load the vertex shader!
I did find an open bug report with another user having the same problem (http://code.google.com/p/android/issues/detail?id=22018) , but there is no follow up there, so I thought I would see if SO gets more attention. Does anyone have any more insight about this issue?
thanks
I've been working on a solution to the same problem. It is working on both tablets and Google TV (including the revue).
The major difference from your code is that I create the HTML code in the android app in code and pass this to webView.loadDataWithBaseURL
webView.loadDataWithBaseURL("http://www.youtube.com", html, "text/html", "utf-8", null);
For more details, please see the source I am working on:
http://code.google.com/p/android-reddittv/source/browse/trunk/RedditTV%20HD%20Android/src/com/elsewhat/reddittv/hd/YoutubePlayerActivty.java
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.