software - javascript webview android

Intercepción de solicitud de fuente de video HTML5 en Android WebView

Question

Tengo una aplicación que muestra una página HTML5 con un elemento de video en un WebView. Me tomó un tiempo descubrir cómo hacer que el video funcionara, pero finalmente tuve éxito al reproducir el video incrustado en un WebView en un Samsung Galaxy Tab (Android 3.1). Usé el siguiente código para la etiqueta de video:

<video controls poster="img/poster.jpg" height="240" width="360">
<source src="video/BigBuck.m4v">
<source src="video/BigBuck.theora.ogv" type="video/ogg">
<source src="video/BigBuck.webm" type="video/webm">
HTML5 video not supported.
</video>

El elemento de video tiene varias fuentes y ahora estoy tratando de capturar la fuente de video seleccionada (y el formato) antes de que el video comience a reproducirse. Cuando hago clic en el botón Reproducir, veo una solicitud HTTP para el archivo de video que llega al servidor web donde están almacenados los archivos de video, pero no logro interceptar esta solicitud en la aplicación.

Miré varios métodos para ver si la solicitud del archivo de video pasa allí, pero no vi que pasara en ninguno de ellos.

• En shouldOverrideUrlLoading(WebView view, String url) en mi WebViewClient solo se WebViewClient la solicitud inicial de la página HTML5.
• En shouldInterceptRequest (WebView view, String url) en mi WebViewClient , solo veo que se pasa la solicitud inicial de la página HTML5 y una solicitud para la imagen del póster de video, pero no para el archivo de video.
• onShowCustomView(View view, CustomViewCallback callback) en mi WebChromeClient solo se llama cuando hago clic en el botón de control de pantalla completa en la página HTML5 cuando el video ya se está reproduciendo, pero no cuando hago clic en el botón reproducir. (¿Cuál es en realidad el propósito de este método?)

¿Alguien tiene una sugerencia para otro método donde puedo capturar la solicitud del archivo de video o alguien puede explicarme qué sucede realmente cuando hago clic en el botón Reproducir en el elemento de video?

Answer 1

Resolví el problema usando un enfoque javascript. Cuando se carga la página HTML, se loadedmetadata un evento de metadatos cargados cuando los metadatos de video se han cargado. A partir de ese momento, puede obtener la fuente de video seleccionada del atributo currentSrc del elemento de video y pasarla a través de una JavascriptInterface al código nativo de Android.

A continuación se muestra el código del elemento de video HTML5. "Android" es el nombre por el cual se puede acceder a JavascriptInterface en javascript.

<video poster="image/poster.jpg" height="240" width="360" onloadedmetadata="Android.interceptPlay(this.currentSrc);">
<source src="video/BigBuck.m4v">
<source src="video/BigBuck.webm" type="video/webm">
<source src="video/BigBuck.theora.ogv" type="video/ogg">
HTML5 video not supported.
</video>

El código de JavascriptInterface

private class JavaScriptInterface {
Context mContext;
/* Instantiate the interface and set the context */
JavaScriptInterface(Context c) {
mContext = c;
}
public void interceptPlay(String source) {
// do something
}
}

Y, finalmente, agregue la JavaScriptInterface a la WebView en el momento de la creación de la actividad

mWebView.addJavascriptInterface(new JavaScriptInterface(this), "Android");

Es importante capturar el evento de loadedmetadata agregando el atributo de onloadedmetadata al elemento de video HTML5 y no registrando un oyente de evento al cargar la página a través de addEventListener("loadedmetadata",...) porque en una red rápida el evento de loadedmetadata se puede disparar antes el oyente está registrado (ver http://dev.opera.com/articles/view/consistent-event-firing-with-html5-video )