Created
September 13, 2012 23:03
-
-
Save Offbeatmammal/3718414 to your computer and use it in GitHub Desktop.
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I got a stream from h5 getUserMedia, it works in a mobile web browser, however it work abnormal in an app webview. Do you have any idea about this?
There is a video label in the h5.
function showAndroidToast(toast) {
Android.showToast(toast);
}
var myConstraints = {
audio: false,
video: { facingMode: { exact: "environment" } }
}
navigator.mediaDevices.getUserMedia(myConstraints).then((stream) => {
var video = document.querySelector('#video');
//video.src = (window.URL || window.webkitURL || window || {}).createObjectURL(stream)
//video.src = window.URL && window.URL.createObjectURL(stream) || stream
//video.play();
}, (error) => {
showAndroidToast(error.name || error);
})