public
Last active

A sample showing HTML5 video events and appropriate properties. Useful for testing different browser behaviors. The Java file is an Android webView that can be used to host the HTML sample

  • Download Gist
gistfile1.java
Java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
package com.offbeatmammal.android.webview;
 
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.RelativeLayout;
 
public class WebViewActivity extends Activity {
 
private WebView webView;
 
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.webview);
 
webView = (WebView) findViewById(R.id.webView1);
webView.setWebChromeClient(new WebChromeClient());
webView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);
webView.getSettings().setJavaScriptEnabled(true);
 
// load the customURL with the URL of the page you want to display
String pageURL = "http://url/page.html";
webView.loadUrl(pageURL);
 
//String customHtml = "<html><head><title>Sample</title></head><body><p>Sample</p></body></html>";
//webView.loadData(customHtml, "text/html", "UTF-8");
}
}
html5videoEvents.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=">
<title></title>
</head>
<body>
<video id="video" autobuffer controls height="240" width="360">
<source src="<!-- enter source of video here -->">
</video>
 
<div id="msg"></div>
 
<script type="text/javascript">
// array of the events we want to track
var events=new Array("abort","canplay","canplaythrough","durationchange","emptied","ended","error","loadeddata","loadedmetadata","loadstart","pause","play","playing","progress","ratechange","seeked","seeking","stalled","suspend","timeupdate","volumechange","waiting");
 
var vid=document.getElementById('video');
var msg = document.getElementById('msg');
 
// add event listeners to the video
for (var i in events) {
vid.addEventListener(events[i], showEvent, false);
}
 
function showEvent(e) {
var addMsg = "";
if (e.type == "durationchange") {
addMsg = e.type + "[" + vid.duration + "]";
} else if (e.type == "seeked") {
addMsg = e.type + "[" + vid.currentTime + "]";
} else if (e.type == "timeupdate") {
// do nothing as there are a lot of these
} else if (e.type == "volumechange") {
addMsg = "volume " + (vid.muted ? "muted" : vid.volume);
} else {
addMsg = e.type;
}
if (addMsg != "") {
msg.innerHTML = addMsg + ((msg.innerHTML == "") ? "":", ") + msg.innerHTML;
}
}
 
</script>
 
</body>
</html>

I put this simple sample together as I needed to test how events were being processed in a webView on Android (ICS) based devices for HTML5 .

It turns out that it's not quite the same as on a desktop browser, and for good measure there seems to be some discrepancy among different devices. In most of the desktop browsers events are displayed as soon as they occur. On Android devices the two biggest differences are the pause event isn't displayed until another event fires, and when loading the video we get a spurious durationchange[1] event. Would love to know how it behaves on iOS

The Java sample is an Android WebView that can be used to host the HTML5 video sample.

It is important that your manifest also targets API15 or above and includes
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

and
<application
android:hardwareAccelerated="true"
.... />

i am using webview and in that webview i am displaying locally store html pages (store in assets plus video) . now in that web page there are some video files so i locally connect it in html file but it wont play file from assets folder.. any suggestion

@swapniladsure you are facing the problem because anything stored in the asset folder is not stored as a file. It's just an entry in the APK. It is a file in your development machine, but it is merely an entry in an APK file on the device.
So, you'll have to copy the files from the assets to a location on the sdcard.

where to put html5videoEvents.html file either in assets folder or anywhere else

In this example I host it on a server that the device can see, but it's equally possible to put it into your assets - see http://stackoverflow.com/questions/16022536/how-can-i-embed-html5-video-into-a-webview/16090868#16090868 though sometimes you have to be a little tricky to get video assets accessible

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.