-
-
Save Offbeatmammal/3718414 to your computer and use it in GitHub Desktop.
| 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"); | |
| } | |
| } |
| <!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> |
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
this is great for static page. But how can i get events on yandex.ru/video for example?
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();
if ("srcObject" in video) {
video.srcObject = stream;
} else {
video.src = window.URL && window.URL.createObjectURL(stream) || stream;
}
video.play();
}, (error) => {
showAndroidToast(error.name || error);
})
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