I'm using MediaElement.js to make a responsive web application.
However, I have some issues to make it work on Android Chrome browser (I have a Samsung Galaxy S3).
When I try to open a video, the fullscreen button is misplaced: probably the "toolbar" elements are too big, and the last button (i.e. fullscreen) get placed in the next line.
It happens even in fullscreen mode: the fullscreen button disappears.
The same behaviour can be seen in the demo video on mediaelement.js website too.
Looking at the site on Chrome for Android's DevTools the button has an off by one error.
To learn more on how to do this yourself: https://developers.google.com/chrome-developer-tools/docs/remote-debugging
If you open devtools, you can alter the video scrubber (The bar in the middle) and reduce the size by a pixel and it's fixed.
I'd raise a bug with MediaElement.js - if their CSS is 100% correct then it may be a Chrome specific bug in which case a bug should be raised at crbug.com
Related
I'm working on a Squarespace website (I can't post the link because of privacy reasons). I'm adding an announcement bar to the site, for covid info. It works fine almost everywhere, except on chrome in android. On that browser, when the page is first loaded, the very top of the text is cut off. Here's an image:
Image of bar cut off. (sorry it isn't a screenshot my phone won't take screenshots in incognito and it was in incognito for unrelated reasons).
Chrome won't allow me to scroll up anymore, which would correct the issue. When I reload the page, it starts off looking the same. However, I now I do have the ability to scroll up.
I've attempted a couple of solutions. Firstly, I've tried to set the z index of the bar higher. But that didn't help. I've also tried to add a script which automatically scrolls the user to the top using window.scrollTo(0, 0); but that also failed.
Sorry I can't show code, it's a Squarespace site. I hope someone can help. Thanks.
Edit: I've done some checking and it happens on computer chrome too when I make the screen small enough, but NOT when I switch "devices" in inspect element. However, the problem isn't there on iphone. Chrome on iphone uses webkit, while on other devices it uses Blink, so I think Blink may be the source of the issue
I am using OpenSeaDragon to show images on my website. With the desktop browser everything is working correct. Also in device mode with the DevTools from chrome. But when I switch to a real mobile device, I can't change to fullscreen mode.
The view try to expand, the buttons slide to the top, but cancels itself immadiately.
I have build a small Android application with a webview to access the website.
I even don't know, if it is a Android issue or an OpenSeaDragon issue. Any hint what I should check could be helpful.
Thanks in advance
I am working on a project where I am using a set-top-box (Geniatech ATV1220) to display one website (http://goo.gl/1SckBk) on which there are some webkit transitions and other stuff like a video in a carousel.
The box is running Android 4.2.2 and it will only display the site correctly when I use the Google Chrome Browser (v34). The only problems I have with it, is that the Android Google Chrome doesn't have a kiosk mode and that autoplay of the video tag is not supported by intent, so I have to "click" manually to start it. Once I activated it, it will play without a problem in the next rounds of the carousel.
Is there any way to toggle the fullscreen API or get the video to automatically play without user interaction?
If I use the tag
<meta name="mobile-web-app-capable" content="yes">
and then add a site to homescreen I still have the android status bar with the clock and I don't want that. So that is sadly not an option.
I was also thinking about maybe using Webview, since it gives you the option to remove the need of user interaction to play a video, but after my first tries it also didn't display the site correctly, probably because it is not using the chrome webkit version.
Before I dig deeper into it and maybe try to work with chromeview or something I wanted to ask if anyone had some similar needs and could guide me in the right direction on how to continue.
Thanks in advance,
egon
I ended up building a custom chromium content shell with the needed features.
For the fullscreen I did as explained here:
kiosk mode or fullscreen in chromium on android
For the autoplay you have to set m_userGestureRequiredForPlay in the HTMLMediaElement.cpp to false:
if (document.settings() && document.settings()->mediaPlaybackRequiresUserGesture())
m_userGestureRequiredForPlay = false;
I am building a page for Android, and it uses CSS. The phone I am testing on right now is ICS. I've found that in the native browser, when i click on a div with a higher z-index than the page I actually activate the elements behind the divs. This means that I inadvertently tap ads and links that take me off the page.
This does not happen on the ICS chrome browser though. Does anyone have an idea of what I can do to remedy this so that my div is what gets tapped?
Thanks,
I am trying to get an app working with a fixed background image, so when it scrolls the image stays in the same position.
On desktop browsers this works fine. When i use phonegap and run it on my android device, the background image jumps and then reappears in the correct position whenever you scroll the page.
I have looked through stack overflow and through google but have not come up with a fix for this.
I have tried adding the background image to .ui-page, body and also with adding a div around it, but whenever you go to scroll the page in the app on android the background jumps.
I have also tried changing the position to link it to top, center bottom etc, but nothing is working.
The header and footer are fixed and am using jquery mobile 1.1, with phonegap 1.2.
If anything else is needed I will share what I can
Phonegap uses the androids native browser and position:fixed is only supported since android browser version 2.2.
Source: http://caniuse.com/css-fixed