I have a poster image on a video that is shifted down about 40 pixels leaving whitespace above it. When the video plays it moves up and plays in its correct location. Also, the control bar centers vertically on the video instead of aligning at the bottom of the video.
This video is being rendered in an Android WebView. Works fine on all other browsers without the fantom margin or odd control placement.
I'm wondering if any of my css could be throwing it off (When I check the computed values in Safari Web Inspector both padding and margin are 0)
Above the video poster image can be seen with the fantom margin. The poster image should be flush with the hairline divider.
I believe the above issue is related, the video controls are centered vertically on the video when they should sit at the bottom. You can see that the video has shifted up in that margin.
Eventually the controls fade away and the video plays as it should.
Is there any way to apply css directly to a video poster? I'm guessing the poster is displaying awkwardly because it is a different size than the video. I'm wondering what CSS I'd need to handle this.
My CSS foo is not that great. I'm more a native developer.
This was a problem with my CSS. Eventually I had to wrap everything in a div an put height and width to 100%
Related
I'm playing a Full HD video inside a VideoView, but my screen size is just 1216px x 684px.
The VideoView is cropping the video, but I want it scaled down. I found one "bug" that makes what I want, but surely it's not the best way. If I set 1px margin around the VideoView, it scales correctly.
The VideoView is inside a RelativeLayout, I tried to set centerInParent, "alignParentLeft, Right, Top and Bottom" but none of this works.
Is there another way to make VideoView correctly scale the source?
Another issue:
When I pause my VideoView, it goes dark, instead of freezing the image. Is there a way I could achieve this behavior?
Thanks in advance for every reply.
I have a webview and it displays a video link over the internet. Bu when the video was loaded it scales the view bigger than my linearlayout. But I want it fit into my linear layout. I've tried some methods like LayoutAlgorithm.SINGLE_COLUMN or writng the scale property manually but I couldn't find the right solution.
How can I scale it dynamically?
You may like to try setInitialScale ( http://developer.android.com/reference/android/webkit/WebView.html#setInitialScale(int) ). This will help to "zoom" the page (or the video) shown in the Webview to fit a particular width. Actually the size of HTML5 video in that page is decided by webkit engine and we cannot directly change its size from App layer.
You may also want to calculate the expected width yourself, due to the fact that Android devices have hundreds of screen resolutions and the width of your LinearLayout may vary on defferent devices.
I've encountered some problem with Iframe on mobile devices using android. It appears, that the iframe is ingoring everythng in my css files or even direct styling. It simply put itselfs in the left top corner over all content.
Nothing helps me get it out of that place, not margin, absolute position or anything else.
Even when I wrap that iframe with div a set absolute position to that div, nothing change.
Does anybody have n idea,what this could do?
I use WebView widget in my project to display HTML5 videos or different content in HTML5 or not. I have no problem to render these HTML5 pages (using video or not) if my WebView is in MATCH_PARENT and fit my screen device.
A problem occurred when I see HTML5 video and other HTML5 elements (using 3D properties? checking progress...) in WebView with fixed size. I suppose that my problem occurred when the WebView renders some elements on the SurfaceView which causes a shift of content when the WebView layout param isn't MATCH_PARENT.
Let me explain with an example, consider a device in 800 * 600, I decided to center my webview which has a width of 400px. So I can see 100px to the right and 100px to the left of my webview, normal.
I see my HTML5 video cropped to the right. The width of the crop is the offset between the left border of the screen and the left of the webview.
If I increase the space to the left of the webview, the crop will be have the same value of this space.
From youtube page, the HTML5 content is displayed correctly with the same size of my webview but just my video HTML5 element is cropped ...
For a better understanding, I let you see the screenshots that will be more understandable ...
http://android.googlecode.com/issues/attachment?aid=405500000000&name=webviewhtml5-vimeo-cropped.png&token=2lYIR8vnq0aGAHjQ4Ppvj9bs6hg%3A1354812792302&inline=1
The problem appears from Android 3.x to 4.0.x. From Nexus S phone running Android 4.1 and Samsung Galaxy S III Android 4.1, the problem is solved.
I am surprised to find no one who has reported this problem on the bugreport or stackoverflow? Generally, I think the webview is used in fullscreen.
If you can reproduce this problem with a basic project, go to this address :
http://code.google.com/p/android/issues/detail?id=40550
My biggest annoyance with browsing websites on my Android browser is reading text with indented blockquotes. Android's webkit implementation (correctly, in my opinion) sets the width on any text element to the browser width.
However, this means that list and blockquote elements which have left margin or padding applied to them hang over the right edge of the visible screen. This makes for annoying reading experience, as the user has to be constantly scrolling right and left to read.
This behavior is visible in just about any site viewed on Android, and my feeling is that this constitutes a bug in the browser.
But my question is: does anyone have a good css solution to preventing this issue? I've tried wrapping all body text in a block-level element with max-width: 100%, but elements with left padding or margin still hang off the edge.
You should be able to fix that by setting the box model for the div/p/li etc.
-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;