在Android WebView中拦截HTML5视频源请求 [英] Intercepting HTML5 video source request in Android WebView

问题描述

我有一个应用程序，它在WebView中显示带有视频元素的HTML5页面。我花了一段时间才弄清楚如何让视频正常工作，但最后我成功地在三星Galaxy Tab（Android 3.1）上播放嵌入在WebView中的视频。我使用以下代码作为视频标记：

I have an app which shows a HTML5 page with a video element in a WebView. It took me a while to figure out how to get the video working, but finally I succeeded to play the video embedded in a WebView on an Samsung Galaxy Tab (Android 3.1). I used the following code for the video tag:

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

视频元素有多个来源，现在我正在尝试捕获所选的视频源（和格式） ）在视频开始播放之前。当我单击播放按钮时，我看到视频文件的HTTP请求到达存储视频文件的Web服务器，但我没有成功拦截应用程序端的此请求。

The video element has multiple sources and now I'm trying to capture the selected video source (and format) before the video starts to play. When I click the play button, I see a HTTP request for the video file arriving at the web server where the video files are stored, but I don't succeed in intercepting this request at the app-side.

我查看了几种方法来查看视频文件的请求是否通过了，但我没有看到它通过其中任何一个。

I looked at several methods to see whether the request for the video file passes there, but I didn't saw it pass in any of them.

• 仅在我的 WebViewClient 中的 shouldOverrideUrlLoading（WebView视图，字符串网址）初始HTML5页面请求已通过。


• 在我的 WebViewClient中的 shouldInterceptRequest（WebView视图，String url） / code>我看到只传递了初始HTML5页面请求和视频海报图片请求，但没有传递视频文件。


• onShowCustomView（仅当我在视频播放时单击HTML5页面上的全屏控制按钮时，才会调用我的 WebChromeClient 中的视图，CustomViewCallback回调），但不是我的时候舔播放按钮。 （这个方法的目的是什么？）

• In shouldOverrideUrlLoading(WebView view, String url) in my WebViewClient only the initial HTML5 page request passes.
• In shouldInterceptRequest (WebView view, String url) in my WebViewClient I see only passing the initial HTML5 page request and a request for the video poster image, but not for the video file.
• onShowCustomView(View view, CustomViewCallback callback) in my WebChromeClient is only called when I click the fullscreen control button on the HTML5 page when the video is already playing, but not when I click the play button. (What is actually the purpose of this method?)

是否有人建议我可以捕获其他方法的另一种方法视频文件还是有人可以解释一下，当我点击视频元素上的播放按钮时实际发生了什么？

Does anyone have a suggestion for another method where I can capture the request for the video file or can anyone explain me what actually happens when I click the play button on the video element?

推荐答案

我解决了这个问题使用JavaScript方法。加载HTML页面时，加载视频元数据时会触发 loadedmetadata 事件。从那一刻起，您可以从视频元素的 currentSrc 属性中获取所选视频源，并通过 JavascriptInterface 到Android原生代码。

I solved the problem using a javascript approach. When the HTML page is loaded, a loadedmetadata event is fired when the video metadata has been loaded. From that moment on you can get the selected video source from the currentSrc attribute of the video element and pass it via a JavascriptInterface to the Android native code.

以下是HTML5视频元素的代码。 Android是可以在javascript中访问 JavascriptInterface 的名称。

Below is the code of the HTML5 video element. "Android" is the name by which the JavascriptInterface can be accessed in 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>

JavascriptInterface的代码

The code of the 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
    }
}

最后在活动创建时将JavascriptInterface添加到WebView

And finally add the JavascriptInterface to the WebView at Activity creation time

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

抓住 loadedmetadata 事件非常重要将 onloadedmetadata 属性添加到HTML5视频元素，而不是通过 addEventListener（loadedmetadata，...）在页面加载时注册事件侦听器/ code>因为在快速网络上，可能会在注册侦听器之前触发 loadedmetadata 事件（请参阅 http://dev.opera.com/articles/view/consistent-event-firing-with-html5-video ）

It’s important to catch the loadedmetadata event by adding the onloadedmetadata attribute to the HTML5 video element and not by registering an event listener at page load via addEventListener("loadedmetadata",...) because on a fast network the loadedmetadata event may be fired before the listener is registered (see http://dev.opera.com/articles/view/consistent-event-firing-with-html5-video)

这篇关于在Android WebView中拦截HTML5视频源请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！