Support for WebView - webview

Does video.js support Android WebView?
We use an Android app to put a tablet in Kiosk Mode in which our web app runs. However, webview video tag does not give us a image of the first frame, only the ugly widgets background.

A better question might be whether your WebView supports video.js. You need to configure the WebView to behave equivalently to a proper browser – HTML5 video definitely won't work without some tweaking. I've found this custom web view to work well (including with video.js):
https://code.google.com/p/html5webview/

Related

how to use the link with aframe without exit by vr mode?

I'm trying to use a-frame link on android smartphone with VR mode. When I start in VR mode if i move the cursor on the link it switch on the new page but exit by VR mode. Is this a way to remain in VR mode when I move to another page?
At the time of wrtitting this answer Firefox Desktop is the only browser that supports in VR navigation
according to the documentation, the browser needs to implement the vrdisplayactivate event to allow you to switch pages and maintain in VR mode.
I can't find any info about samsung internet, or carmel having this implemented.
Moreover the MDN states, that this is experimental, so i wouldn't be surprised if only Firefox had this functionality.
As a workaround, You can try switching scenes, or switching visibility on entire areas, instead of making links.
UPDATE
Doug Reeder claims samsung internet (5.6) should also be supporting vrdisplayactivate

rotation changed event, iPad, to HTML5

I am working on an iPad app, which has a UIWebview, which in turn hosts an html5 document that is saved locally and is not downloaded from the internet.
I am handling the rotation changed event in obj c and doing the relevant UI changes for native iOS, I have another guy working on the html5 and he says that he is handling that event in CSS, my question is:
can an html5 document loading within a UIWebview in an iOS app know that a rotation occurred? or is the iOS layer supposed to alert ( or notify ) the HTML5 layer of that?
How do people handle this situation?
Thanks.
One possibility, is to execute javascript functions from iOS.
So for instance, on your view controller's didRotateFromInterfaceOrientation method, you could in turn call stringByEvaluatingJavaScriptFromString on the UIWebView. This question talks about how to do that (Calling Javascript using UIWebView).
As far as the rotation and handling in CSS, here is a blog entry describing #media queries (https://mislav.net/2010/04/targeted-css/). I haven't tried the orientation queries, but I have used the other queries to target specific devices and screen types (i.e. retina).

Difference between content in uiwebview and mobile safari?

I am showing a twitter feed in a uiwebview... however there is a problem: it appears significantly differently in the uiwebview then what it does in mobile safari. Ultimately, I much prefer the look of the feed as it is shown in mobile safari. Is there any way to 'trick' the web view into displaying itself as safari? Possibly by altering the user agent? Thanks.
Ended up altering the user agent. App made it past apple review fine.
UIWeView and Safari doesn't display all the pages as the same..There can be minor differences in formatting in UIWebView which won't be found in Safari..
Solution to this is to use javascript to alter the WebView itself programmatically to display things right..
more info avaialble in UIWebView Class Reference doc here

Website for iPad Mobile Safari

While creating a website for iPad Mobile Safari, I have a few questions;
Does the orientation happen automatically or do we have to write code for that ?
What is the best approach in terms of CSS/JS..I mean create separate copy of the web CSS for iPad and just update for iPad specific. Also what about JS?
What is the best way to detect for iPad (CSS/JS) and how?
Any online references which specifically covers iPad Mobile Safari development will also be great.
Thank you.
The orientation happens automatically, but you can write code to intercept the event and do things.
I highly recommend using an existing JS library such as Sencha Touch to handle the UI for you; they automatically detect the client and will display the appropriate scale of the app.
I just added a few meta tags to my current project, based on this page - http://www.nczonline.net/blog/2010/04/06/ipad-web-development-tips/
It made a huge difference. The orientation media queries work great. I madea simple example by setting the body background colour different based on orientation.

iPad + HTML5 Video Tag + External display issue

I am using HTML5 video tags in a UIWebview on the iPad, and positioning them as needed using CSS. The key part of these videos is that they are designed to take up part, but not all, of the visible area on the page. When I'm doing this in the "normal" mode of displaying content only to the primary UIScreen, everything works great.
However, when an external VGA projector is hooked up as a second UIScreen, the video tag content immediately becomes FULL SCREEN. This seems to also happen in Safari when looking at, for example, YouTube videos. In searching the docs, there seems to be no way to stop / control this behavior.
Is there any way to stop a video tag from forcing its content to go to full screen when a second display is connected?
Unfortunately, using a UIWebView iOS 3.2 doesn't offer any way to do this. Video in a UIWebView always plays fullscreen on an external display using the TV out feature.
However, the good news is that iOS 4 does offer a solution. UIWebView has a couple of new properties:
allowsInlineMediaPlayback
http://developer.apple.com/library/ios/documentation/uikit/reference/UIWebView_Class/Reference/Reference.html#//apple_ref/doc/uid/TP40006950-CH3-SW32
mediaPlaybackRequiresUserAction
http://developer.apple.com/library/ios/documentation/uikit/reference/UIWebView_Class/Reference/Reference.html#//apple_ref/doc/uid/TP40006950-CH3-SW33
The former will allow the videos to remain 'inline' as opposed to using the full-screen player.

Resources