I have created an ionic app. It gets a list of video from youtube channel and displays it in a view using <ion-list> after the tap on one of the list item app moves to next view where I set Iframe for a youtube video.
<iframe src="https://www.youtube.com/embed/gvI2ClWqHO0?feature=player_embedded" frameborder="0" width="560" height="315" allowfullscreen></iframe>
After play video if I press back button of mobile app moves back to my first screen where a list of all videos available. But the issue is that if a video is playing in fullscreen mode and I press back button app doesn't back to the previous screen it just exits the app.
I tried different question in stackoverflow but nothing to solve my problem yet.
Info Update
Currently, I am focusing only on Android
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 using react-native-community/react-native-webview and on the website we have Nexx player for playing videos.
Android works fine but I have problems with ios. On ios, I have a fullscreen modal where is possible to play video. And if I click on play button video jump into fullscreen mode and start playing. That is right. But if I want to close video by X button on the corner Video will jump back to start position and immediately jump back to the fullscreen mode and sometimes show an icon over the video. I will try to close it and the situation will be repeating after a few repeating is finally closed.
I think the problem is in ios fullscreen video player. Because if I want to play video some fancy webview features will handle video and show it in fullscreen (because Nexx player looks different then this view and I also tried to turn off fullscreen mode but video always jumps in fullscreen). I try to pause the video when it will jump out of fullscreen but it doesn't work. (It works when I pause the video first in fullscreen mode and then I will click on close button = video is close right but if I click on a close button it is doesn't work)
Is there some way how to fix this issues? Or How to control webview feature pause it and then close it when the user clicks on X button?
I have a website with a big video in the background and I used HTML5 video for it. It does all I want on desktops, I can't make it work on tablets though (don't need it on mobiles) - instead of a video I see a black background only.
Code below:
<div id="video-container">
<video autoplay loop class="fillWidth">
<source src="http://link/vid.mp4" type="video/mp4"/>
<source src="http://link/vid.ogv" type="video/ogg"/>
<source src="http://link/vid.webm" type="video/webm"/>
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
Is it caused by the autoplay option? If so, is there any workaround?
Thanks,
S.
On most mobile browsers (including tablets - definitely iPad), autoplay will not work. The browser won't download any of the video file, not the first frame or even the metadata, until there's some kind of user interaction event - typically either a click or a touch.
The first thing you can do to alleviate the situation is to set a poster attribute on the video element, which is the URL to a poster image. That image should be visible right away in place of your video. If you want to go the extra mile, you can set a background color on the body so the user will see that while they're waiting for the poster image to load.
Next, you can add a touch or click event listener anywhere you want in the document that starts the video playing as soon as the user interacts with your web page.
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 using a html video on my webpage and I've noticed on android phones when the video goes to full screen and I press the back button, it just leaves and empty video player frame with the pause button showing. Is there a way to hide the empty player or the div that contains the video when the user presses the back button on their phone?
I'm currently using the the events js for the video tag and have added the mobile jquery pack in the hopes for an if back button press do this.
Any help on this would be great as it's all working fine on the web version and on an ipad/iphone.