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.
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 trying to integrate an HTML 5 video player with It's auto-play attribute on my site. It is working fine on Web and other devices but it is not working with any android device which has 4.0 and above OS. I have seen this Link.But I am looking if there is any workaround for this issue.
Note:I have also tried implementing jwplayer but later on I found that it doesn't support the autoplay for android and ios devices.
PS : I have tried to put an image on top of video and clicking on that should trigger an autoplay but still no success.
The only approach I know of is to provide a user interaction before the video begins to play like a 'touch to enter site' button, then on that event play the video. Playing video or audio in HTML5 requires user interaction on Android and iOS. It is by design - no workaround as of today is available. You can read here for confirmation.
You can read here for the whys and hows on iOS (which is the same info as on your Google link).
I made a static website tool that runs in all major browsers and iPad and Android(chrome). I show .mp4 video source with a simple embed tag. This was working just dandy until sometime this weekend. Come monday testing the video in android chrome, it plays audio only when not full screen, and plays correctly when full screen. I tested with the html5 video tag I use in other tools and actually same bug. I converted the video to other formats and codec, same bug. I tested tools that were completed months ago and working perfectly when sold, same bug. Seems likely that it started when chrome updated sometime after the 10/11 over the weekend. But as this project is on the home stretch and I had just debugged the last bugs I am putting it out there hoping for some feedback. I can't be the only one as it is happening with the video tag as well as the embed tag. It has to be chrome that changed my code didn't. Any insights out there?
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 am trying to design a video website compatible with Android. A good example of what I'm trying to achieve is vimeo.com. They show a thumbnail of a video. When you tap it, the native Android player comes up in full screen:
Currently, I have an anchor to an FLV containing an h.264 encoded video:
click here to watch
When you tap the anchor on Android, it downloads the video rather than plays it. That's not what I want. How do I get it to play full screen in the native player like Vimeo? But unlike Vimeo, I would like the video to expand so that there's not so much black empty space around the actual video.
Ahh I see what you mean, clicking a Vimeo video opens the Android dialog of selecting which app should respond to that request (in my case just the browser (which downloads the file) or video player (which opens and plays it as you wanted)). This is normal Android behavior- if you have not defined which app should respond to a given request, it will ask you to select from among the supporting applications.
Have you even tried embedding a video in the way suggested through the link I gave you? You may find that it will have the exact effect the Vimeo video does. HTML5 <video> element on Android
EDIT: Actually I think your real problem is probably just that the file format you're using (.flv) is not among the core media formats supported by Android. http://developer.android.com/guide/appendix/media-formats.html
if you have the correct codec installed to play the video and doesn't work, check and make sure you have the correct mime types configured and that something in the registry or a file isn't overwriting.
use the old standard of defining mp4 and falling back to flash.
In mobile Safari and Android webkit there are javascript methods and events defined on the Video object that can help with this. There is another StackOverflow question dealing with this topic (for iPad, but I have used this on Android phones as well).
Web App - iPad webkitEnterFullscreen - Programatically going full-screen video
Mobile Safari documentation: http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html