Question

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

<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服务器，但我没有成功拦截应用程序端的此请求。

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

在我shouldOverrideUrlLoading(WebView view, String url)的{{1}}中，只有初始HTML5网页请求通过。
在我WebViewClient的{{1}}中，我看到只传递了初始HTML5页面请求和视频海报图片请求，但视频文件没有。

shouldInterceptRequest (WebView view, String url)

WebViewClient仅在视频播放时点击HTML5页面上的全屏控制按钮时被调用，但是当我点击播放按钮时则不会。（这种方法的目的是什么？）

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

Answer 1

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

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

<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的代码

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

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

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

在Android WebView中拦截HTML5视频源请求

1 个答案: