7

I have a webpage that "plays a video" using sprite sheets. The page is mobile-optimized, so it can get loaded into Android and iOS WebViews. I'd like to know is when the page is visible so only after that I can play the video. I don't want users to catch the video mid-stream because the WebView lags in presenting itself.

I can see some developers might wait until the whole page has finished pulling in all the assets from the page before making it visible to the user. So, I don't want the "video" to start before that time. I can't rely on window.onload because that event fires even when the WebView isn't onscreen or visible.

How can I accomplish this from the client side, with some JavaScript, preferably?

[Edit] To be clear, I'm implying that I don't have any control over the native WebView. You can load web pages into a WebView that isn't onscreen and push the view or add it to the on-screen layout at a later time. My issue is that when my webpage's URL is loaded into a WebView, I can't tell when the WebView comes onscreen.

user2122422
  • 103
  • 4
  • 2
    Did you try jQuery $(document).ready(function() { // code for showing video }); – Stiger Mar 01 '13 at 06:52
  • 1
    as a simple fix, I would just add a slight delay for the animation using `setTimeout()` – kennypu Mar 01 '13 at 06:52
  • 1
    Hmm, I'm not using jQuery at all. Is it a good idea to include that library just for that `ready` function? What's the regular ol' JavaScript equivalent? – user2122422 Mar 01 '13 at 07:19
  • 1
    @kennypu What if the WebView isn't displayed until user action? I wouldn't be able to predict that... – user2122422 Mar 01 '13 at 07:19
  • 1
    i thought the webpage was loaded when the webview is displayed? if not, you can just do that; show/refresh the page when the webview is displayed. – kennypu Mar 01 '13 at 07:27
  • You can call WebView#loadUrl on a WebView that hasn't been added to the onscreen layout yet. – user2122422 Mar 01 '13 at 17:11
  • If you are talking about a regular web site, and this is an edge case where someone is viewing your site in an in-app browser or in Mobile Safari or similar, then I'm not sure what you want can be done, as you don't have access to the WebView native object from Javascript. You might get access to some things by "sniffing" for mobile hybrid frameworks like PhoneGap/SensaTouch etc., but that would NOT be reliable. I think the closest you can get is to use jQuery's (or Zepto's) $(docuemnt).ready() as others have suggested, or make the user click something to display the animation. – Joe Dyndale Mar 01 '13 at 17:30
  • @JoeDyndale I've never really used JavaScript libraries before, but, to my knowledge, they're still just JavaScript, right? So, I'm wondering: what's going on in the `ready` function that I can't rip out and use for my webpage? That is, I guess I'm a little averse to including a **whole** library for one function that I might be able to implement myself... Is jQuery that magical? – user2122422 Mar 03 '13 at 21:21
  • Have a look at the source code for jQuery and find out what the $(document).ready() function does. I'm not 100% sure myself - not exactly. But basically I think it does some more extensive checks to make sure the DOM has indeed been completely loaded. – Joe Dyndale Mar 09 '13 at 15:21
  • are you sure that you can autoplay the video? I am trying something similar with no chance. Related links with autoplay: 1. http://stackoverflow.com/questions/11758651/autostart-html5-video-using-android-4-browser 2. http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/ 3. http://www.centurion-project.org/articles/how-to-autoplay-html5-video-on-android – madlymad Mar 11 '13 at 20:01

3 Answers3

3

Take a look at the Safari Web Content Guide. Scroll down to the Supported Events table. I am thinking (or hoping) that the pageshow event will do what you are hoping for. There is also the focus event.

Looks like using these events for mobile Safari would be as easy as

<body onpageshow="onPageShow();">

I am less familiar with Android, but I will look into it real quick.

EDIT: The onpageshow solution should work the same way in Android 2.2 and above as it does in iOS 4.0 and above. As for whether it works the way you need it to, I am not entirely sure. Let me know!

Mathew
  • 1,788
  • 15
  • 27
  • Thanks for the answer! I haven't had a chance to test, but I will report back with results when I do. Thanks again – user2122422 May 10 '13 at 01:24
1

It is not possible to control the webview using JavaScript. If its not too late to change the design of the app, using native APIs will give you more control of the webview.

You could insert a timeout in the webpage before loading the video. It might be worth a shot.

Ashish Agarwal
  • 14,555
  • 31
  • 86
  • 125
1

you can use phonegap library: 

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    // Now safe to use the PhoneGap API
}

phonegap is very good for handle events and more action in webview.

omid
  • 762
  • 8
  • 26