Inconsistencies with HTML5 video in an Android WebView -
when showing .mp4 video on html5 page in android webview, video , audio both played when file retrieved remote url. when trying play same media file within device's "/mnt/sdcard/...." path, audio portion of media file played back. thoughts on ? has experienced (and solved) similar? codec issue despite fact video seen when retrieved on network? video returned on network manipulated or transformed somehow before ending in webview.
the following code worked me, hope helps you, think lot of people facing same problem, did html5 video run in applications webview.
i'll walk through procedure.
i wanted load multiple html pages, 1 after another, inside app's webview. these html pages contained either audio followed video, or video followed audio.
here sample of 1 such html page.
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <title>screen2</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link href="css/main-v1.css" rel="stylesheet" type="text/css"> <link href="css/screen2-v1.css" rel="stylesheet" type="text/css"> <script src="js/jquerytest.js"></script> </head> <body> <audio id="audio1" src="audio/screen2_a.mp3"></audio> <video id="video1" src="video/mov_bbb.mp4"></video> </body> </html> now created class act interface between android , javascript in html pages.
here javascriptinterface class named jshandler.java in projects src folder
package com.example.dms; import java.io.ioexception; import com.example.dms.r; import android.app.activity; import android.app.alertdialog; import android.content.dialoginterface; import android.content.intent; import android.net.uri; import android.util.log; import android.webkit.javascriptinterface; import android.webkit.webview; public class jshandler { activity activity; string tag = "jshandler"; webview webview; public jshandler(activity _contxt,webview _webview) { activity = _contxt; webview = _webview; } /** * function handles call js */ @javascriptinterface public void initvideo() { webview.loadurl("javascript:playvideo()"); } public void initaudio() { webview.loadurl("javascript:playaudio()"); } /** * function handles call android-java */ public void javafncall(string jsstring) { final string weburl = "javascript:diplayjavamsg('"+jsstring+"')"; // add avoid android.view.windowmanager$badtokenexception unable add window if(!activity.isfinishing()) // loadurl on ui main thread activity.runonuithread(new runnable() { @override public void run() { webview.loadurl(weburl); } }); } /** * function shows android-native alert dialog */ public void showdialog(string msg){ alertdialog alertdialog = new alertdialog.builder(activity).create(); alertdialog.settitle(activity.getstring(r.string.app_dialog_title)); alertdialog.setmessage(msg); alertdialog.setbutton(dialoginterface.button_positive,activity.getstring(r.string.ok_text), new dialoginterface.onclicklistener() { public void onclick(dialoginterface dialog, int which) { dialog.dismiss(); } }); alertdialog.setbutton(dialoginterface.button_negative,activity.getstring(r.string.cancel_text), new dialoginterface.onclicklistener() { @override public void onclick(dialoginterface dialog, int which) { dialog.dismiss(); } }); alertdialog.show(); } } this code in mainactivity, loads html page inside webview
public class mainactivity extends activity{ //webview variables private jshandler _jshandler; private webview mywebview; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); mywebview = (webview) findviewbyid(r.id.webview); mywebview.setontouchlistener(new view.ontouchlistener() { @override public boolean ontouch(view view, motionevent event) { // todo auto-generated method stub if(event.getaction() == motionevent.action_down && !view.hasfocus()) { view.requestfocus(); } return false; } }); initwebview(); } private void initwebview(){ //tell webview enable javascript execution. mywebview.getsettings().setjavascriptenabled(true); mywebview.setbackgroundcolor(color.parsecolor("#808080")); //set whether dom storage api enabled. mywebview.getsettings().setdomstorageenabled(true); //setbuiltinzoomcontrols = false, removes +/- controls on screen mywebview.getsettings().setbuiltinzoomcontrols(false); mywebview.getsettings().setpluginstate(pluginstate.on); mywebview.getsettings().setallowfileaccess(true); mywebview.getsettings().setappcachemaxsize(1024 * 8); mywebview.getsettings().setappcacheenabled(true); _jshandler = new jshandler(this, mywebview); mywebview.addjavascriptinterface(_jshandler, "jshandler"); mywebview.getsettings().setusewideviewport(false); mywebview.setwebchromeclient(new webchromeclient()); mywebview.setwebviewclient(new webviewclient()); // these settings speed page load webview mywebview.getsettings().setrenderpriority(renderpriority.high); mywebview.getsettings().setcachemode(websettings.load_no_cache); mywebview.requestfocus(view.focus_down); mywebview.loadurl("file:///android_asset/screen2.html"); } }
this considering html page to loaded resides in assets folder of project.
what did placed media files in mnt/sdcard/
for need change src attribute of audio , video tags accordingly. mentioned earlier javascriptinterface class created, i'll use class call audio or video play java, instead of html handling it.
so, here how new html page looks like
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <title>screen2</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link href="css/main-v1.css" rel="stylesheet" type="text/css"> <link href="css/screen2-v1.css" rel="stylesheet" type="text/css"> <script src="js/jquerytest.js"></script> <script> function playvideo() { var cv = document.getelementbyid("video1"); cv.addeventlistener('ended', function () { cv.removeeventlistener('ended'); playaudio(); }, false); cv.play(); } function playaudio() { var ca = document.getelementbyid("audio1"); ca.addeventlistener('ended', function () { ca.removeeventlistener('ended'); playvideo(); }, false); ca.play(); } function init(){ jshandler.initvideo(); } </script> <script> $(document).ready(function(){ init(); }); </script> </head> <body> <audio id="audio1" src="/mnt/sdcard/android/data/com.exapmle.dms/files/resources/audio/screen2_a.mp3"></audio> <video id="video1" src="/mnt/sdcard/android/data/com.exapmle.dms/files/resources/video/mov_bbb.mp4"></video> </body> </html> to explain what's happening here that, when html page loads completely, i've called init(); method defined in html page.
this method calls initvideo(); method defined in jshandler class
as can see, initvideo(); method gives call playvideo(); method defined in html page.
you may wondering why not call playvideo(); method directly on page load, i've tried , didn't work, (atleast me).
i hope helps or else who's facing similar problem in loading html 5 video in webview
Comments
Post a Comment