Auto playing vimeo videos in Android webview -

Auto playing vimeo videos in Android webview -

i've managed vimeo video load , play, using following. autoplay=1 indicated in vimeo oembed docs doesn't auto play on load. found way auto play (also need grab event when video finishes)

mwebview.getsettings().setjavascriptenabled(true); mwebview.getsettings().setappcacheenabled(true); mwebview.getsettings().setdomstorageenabled(true); // how plugin enabled alter in api 8 if (build.version.sdk_int < 8) { mwebview.getsettings().setpluginsenabled(true); } else { mwebview.getsettings().setpluginstate(pluginstate.on); } mwebview.loadurl("http://player.vimeo.com/video/24577973?player_id=player&autoplay=1&title=0&byline=0&portrait=0&api=1&maxheight=480&maxwidth=800");

this reply specific vimeo only. after dozen failed attempts, here's have working. perhaps help else. one thousand apologies original authors of other answers. have 'borrowed' number of patterns below -- thought handy have in 1 place, , not claim them own code.

first, have not found way around embedding vimeo player (i.e. can't @ mp4 stream straight -- @ to the lowest degree not or reliably -- i'm pretty sure that's deliberate). second, vimeo offers javascript library instrument player, , using unavoidable. beware, requires message passing, newer browser feature. documented on api page. third, documented elsewhere on so, need careful wait parts of stack become ready, , not gun-jump. fourth, vimeo player includes particularly unhelpful background image meant convey plugin missing or broken (a little frame of film, mutual icon this). means javascript has bombed out someplace, , nil @ running. if see little bit of cinema on blank screen, check javascript.

step 1. set webview. have right above. reference, here used.

mwebview = new webview((context) this); mwebview.setlayoutparams(new layoutparams(windowwidth, windowheight)); mwebview.getsettings().setjavascriptenabled(true); // watch sdk level here, < 12 requires 'false // wanted forcefulness html5/264/mp4, may want flash // still available mwebview.getsettings().setpluginstate(pluginstate.off); mwebview.getsettings().setloadwithoverviewmode(true); mwebview.getsettings().setusewideviewport(true); mwebview.getsettings().setuseragentstring("android mozilla/5.0 applewebkit/534.30 (khtml, gecko) version/4.0 mobile safari/534.30"); wcc = new mywebchromeclient(); mwebview.setwebchromeclient(wcc); wvc = new mywebviewclient(); mwebview.setwebviewclient(wvc);

step 2. need webchromeclient if want video work on webview. that's documented here: http://developer.android.com/reference/android/webkit/webview.html (see html video support).

again, reference here used.

private class mywebchromeclient extends webchromeclient { @override public void onprogresschanged(webview view, int progress) { if(progress == 100) { // page loaded, not visible, // add together whatever navigation elements plan utilize here. // n.b. these java, not js nav elements } } @override public boolean onconsolemessage(consolemessage cm) { // watch in console. and, since // convenient way monitor javascript, // utilize too. purists object, no uncertainty if(cm.message().equalsignorecase("event -- finish")) { log.i(tag, "---> finishing . . ."); // depart activity finish(); } else { log.d(tag, " **console ["+cm.sourceid()+"] ("+cm.linenumber()+") ["+cm.message()+"]"); } return(true); } @override public view getvideoloadingprogressview() { // entertaining while bytes arrive log.i(tag, " -------------> loading progress . . . "); layoutinflater inflater = (layoutinflater)getsystemservice(context.layout_inflater_service); return(inflater.inflate(r.layout.loading_video, null)); } @override public void onshowcustomview(view v, webchromeclient.customviewcallback callback) { // great sadness, study never fires. // neither 'hide'. } @override public void onhidecustomview() { } }

the webviewclient looks this:

private class mywebviewclient extends webviewclient { @override public void onpagefinished(webview view, string url) { super.onpagefinished(view, url); string injection = injectpagemonitor(); if(injection != null) { log.d(tag, " ---------------> page loaded . . ."); log.d(tag, " injecting . . . ["+injection+"]"); view.loadurl(injection); } } }

step 3. need build tiny bit of javascript fire player. used this:

public string injectpagemonitor() { return( "javascript:" + "jquery(document).ready( function() { " + "console.log(' === page ready ===> setting up');" + "console.log(' ==== sending play command ===');" + "var froogaloop = $f('froog');" + "settimeout(function() { froogaloop.api('play'); }, 3000);" + "});"); }

quick explanation . . . utilize jquery in js, that's coming below. that's convenience, can straight js if want lighten load. note after else ready, script waits 3 seconds fire. in weaker moments, imagine kind folks @ vimeo have broken "ready" callback. 3 seconds seems it.

step 4. need html , javascript on page. set in text file within resources (raw/vimeo_frame.html). file looks this:

<!doctype html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script type="text/javascript">jquery.noconflict();</script> <script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script> <script type="text/javascript"> jquery(document).ready( function() { var showing_player = false; var froogaloop = $f('froog'); console.log(' === page ready ===> setting up'); jquery('.froog_container_class').hide(); jquery('.console').css('height', '100%'); froogaloop.addevent('ready', function() { console.log('==== player ready ====> setting play callback'); froogaloop.addevent('play', function(data) { console.log('event -- play'); /* no thought why, if player isn't displayed, goes straight 'pause'. feature. give 4x4px it's thing during setup */ jquery('.froog_container_class').show(); jquery('.froog_container_class').css('height', '4px'); jquery('.froog_container_class').css('width', '4px'); jquery('.froog_container_class').css('overflow', 'hidden'); }); /* don't want reveal video until playing. here */ var showingplayer = false; froogaloop.addevent('playprogress', function(data) { if(!showingplayer && data.percent > 0) { showingplayer = true; jquery('.froog_container_class').show(); jquery('.froog_container_class').css('height', '_windowheight'); jquery('.froog_container_class').css('width', '_windowwidth'); /* tablets tested aren't quick plenty create work 1 can still hope */ jquery('#loading').fadeout('slow'); } }); }); }); </script> </head> <body> <style> body { background-image: url('http://<somethingentertainingtowatch>.png'); background-size: contain; } .mask { float: left; height: _windowheight; width: _windowwidth; z-index: 100; background: transparent; display: inline; position: absolute; top: 0; left: 0; } .froog_container_class { position: absolute; height: _windowheight; width: _windowwidth; left: 0; top: 0; display: inline; z-index: 1; } #froog { display: inline; height: _windowheight; width: _windowwidth; postion: absolute; top: 0; left: 0; } </style> <div id="loading" class="loading"><h1>loading</h1><img class="loading_anim" src="http://foo.bar.com/assets/global/loading.gif"/> </div> <!-- optional, set div in front end of player block controls --> <div id="mask" class="mask"> </div> <div id="froog_container" class="froog_container_class"> <iframe id="froog" src="_targeturl?api=1&title=0&byline=0&portrait=0&player_id=froog" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen> </iframe> </div> </body> </html>

and load html file so:

public string genmainhtml() { string code = null; seek { resources res = getresources(); inputstream in_s = res.openrawresource(r.raw.vimeo_frame); byte[] b = new byte[in_s.available()]; in_s.read(b); code = new string(b); } grab (exception e) { e.printstacktrace(); } if(code != null) { code = code.replaceall("_windowheight", "" + windowheight + "px"); code = code.replaceall("_windowwidth", "" + windowwidth + "px"); code = code.replaceall("_targeturl", targeturl); return(code); } else { return(null); } }

and inject so:

mdomain = "http://player.vimeo.com"; mwebview.requestfocus(view.focus_down); targeturl = extras.getstring("url"); string meat = genmainhtml(); mwebview.loaddatawithbaseurl(mdomain, meat, "text/html", "utf-8", null); setcontentview(mwebview);

whew! when webview ready, html , js go in, including iframe vimeo player. when document loaded, wait player become ready. when player ready, add together listeners. , 3 seconds later, fire api 'play' method.

those apple-polishers in audience may wondering, completeness, how 1 stop video? 2 bits. first, when ends, stop watching console output message display. thus:

public string injectpagefinisher() { return( "javascript:" + "jquery(document).ready( function() { " + "console.log(' === page ready ===> tearing down');" + "console.log(' ==== sending pause command ===');" + "var froogaloop = $f('froog');" + "froogaloop.api('pause');" + "jquery('#froog_container').html('');" + "});"); }

which can inserted so:

@override public void onpause() { super.onpause(); if(isfinishing()){ // unload page if(mwebview != null) { log.i(tag, " ------> destroying webview"); mwebview.destroy(); } } finish(); }

the sec bit video completes little self. thus, in vimeo_frame.html above, after 'play' callback, put:

froogaloop.addevent('finish', function(data) { console.log('event -- finish'); });

and in activity, set bit watch -- see above in onconsolemessage override.

however -- of writing, still have not sorted 1 nagging problem. mediaplayer lives on after webview , progeny gone. i'm sure creates problems, haven't identified them yet.

android video-streaming vimeo