Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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
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) {
webView = (WebView) findViewById(;
webView.setWebChromeClient(new WebChromeClient());
// load the customURL with the URL of the page you want to display
String pageURL = "http://url/page.html";
//String customHtml = "<html><head><title>Sample</title></head><body><p>Sample</p></body></html>";
//webView.loadData(customHtml, "text/html", "UTF-8");
<meta http-equiv="content-type" content="text/html; charset=">
<video id="video" autobuffer controls height="240" width="360">
<source src="<!-- enter source of video here -->">
<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;

Offbeatmammal commented Sep 13, 2012

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


Offbeatmammal commented Sep 14, 2012

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" />

.... />

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


Offbeatmammal commented Jul 18, 2013

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 though sometimes you have to be a little tricky to get video assets accessible

this is great for static page. But how can i get events on for example?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment