WebView 和 HTML5 <video> [英] WebView and HTML5 <video>

查看:27
本文介绍了WebView 和 HTML5 <video>的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在拼凑一个便宜的应用程序,其中包括框架"我们的一些网站......使用 WebViewClient 非常简单.直到我点击视频.

视频是作为 HTML5 元素完成的,这些元素在 Chrome、iPhone 上运行良好,现在我们修复了编码问题,它在 Android 上运行良好原生浏览器.

现在问题是:WebView 不喜欢它.在所有.我可以点击海报图片,没有任何反应.

谷歌搜索,我发现了这个 很接近,但似乎基于链接"(如在 href ... 中)而不是视频元素.(onDownloadListener 似乎不会在视频元素上被调用...)

我还看到了对覆盖 onShowCustomView 的引用,但这似乎没有在视频元素上被调用......也没有 shouldOverrideUrlLoading ..

我宁愿不进入从服务器拉取 xml,在应用程序中重新格式化它"……通过将故事布局保留在服务器上,我可以更好地控制内容,而不会强迫人们不断更新应用程序.所以如果我能说服 WebView 像原生浏览器一样处理标签,那就最好了.

我显然遗漏了一些明显的东西......但我不知道是什么.

解决方案

我回答这个话题,以防有人阅读它并对结果感兴趣.可以在 WebView 中查看视频元素(视频 html5 标签),但我必须说我不得不处理它几天.这些是到目前为止我必须遵循的步骤:

-找到正确编码的视频

-初始化WebView时,设置JavaScript,插件WebViewClient和WebChromeClient.

<前>url = new String("http://broken-links.com/tests/video/");mWebView = (WebView) findViewById(R.id.webview);mWebView.setWebChromeClient(chromeClient);mWebView.setWebViewClient(wvClient);mWebView.getSettings().setJavaScriptEnabled(true);mWebView.getSettings().setPluginState(PluginState.ON);mWebView.loadUrl(url);

-处理 WebChromeClient 对象中的 onShowCustomView.

@Overridepublic void onShowCustomView(View view, CustomViewCallback callback) {super.onShowCustomView(视图,回调);如果(查看 FrameLayout 实例){FrameLayout frame = (FrameLayout) 视图;if (frame.getFocusedChild() 实例视频视图){VideoView 视频 = (VideoView) frame.getFocusedChild();frame.removeView(视频);a.setContentView(video);video.setOnCompletionListener(this);video.setOnErrorListener(this);视频开始();}}}

-处理视频的 onCompletion 和 onError 事件,以便返回网络视图.

public void onCompletion(MediaPlayer mp) {Log.d(TAG, "视频完成");a.setContentView(R.layout.main);WebView wb = (WebView) a.findViewById(R.id.webview);a.initWebView();}

但现在我应该说还有一个重要的问题.我只能玩一次.我第二次点击视频调度器(海报或某些播放按钮)时,它什么也没做.

我还希望视频在 WebView 框架内播放,而不是打开媒体播放器窗口,但这对我来说是次要问题.

我希望它对某人有所帮助,我也感谢任何评论或建议.

Saludos, terrícolas.

I'm piecing together a cheapo app that amongst other things "frames" some of our websites... Pretty simple with the WebViewClient. until I hit the video.

The video is done as HTML5 elements, and these work fine and dandy on Chrome, iPhones, and now that we fixed the encoding issues it works great on Android in the native browser.

Now the rub: WebView doesn't like it. At all. I can click on the poster image, and nothing happens.

Googling, I found this which is close, but seems to be based on a 'link' (as in a href...) instead of a video element. (onDownloadListener does not appear to get invoked on video elements...)

I also see references to overriding onShowCustomView, but that seems to not get called on video elements... nor does shouldOverrideUrlLoading..

I would rather not get into "pull xml from the server, reformat it in the app".. by keeping the story layout on the server, I can control the content a bit better without forcing people to keep updating an app. So if I can convince WebView to handle tags like the native browser, that would be best.

I'm clearly missing something obvious.. but I have no clue what.

解决方案

I answer this topic just in case someone read it and is interested on the result. It is possible to view a video element (video html5 tag) within a WebView, but I must say I had to deal with it for few days. These are the steps I had to follow so far:

-Find a properly encoded video

-When initializing the WebView, set the JavaScript, Plug-ins the WebViewClient and the WebChromeClient.

url = new String("http://broken-links.com/tests/video/"); 
mWebView = (WebView) findViewById(R.id.webview);
mWebView.setWebChromeClient(chromeClient);
mWebView.setWebViewClient(wvClient);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setPluginState(PluginState.ON);
mWebView.loadUrl(url);

-Handle the onShowCustomView in the WebChromeClient object.

@Override
public void onShowCustomView(View view, CustomViewCallback callback) {
    super.onShowCustomView(view, callback);
    if (view instanceof FrameLayout){
        FrameLayout frame = (FrameLayout) view;
        if (frame.getFocusedChild() instanceof VideoView){
            VideoView video = (VideoView) frame.getFocusedChild();
            frame.removeView(video);
            a.setContentView(video);
            video.setOnCompletionListener(this);
            video.setOnErrorListener(this);
            video.start();
        }
    }
}

-Handle the onCompletion and the onError events for the video, in order to get back to the web view.

public void onCompletion(MediaPlayer mp) {
    Log.d(TAG, "Video completo");
    a.setContentView(R.layout.main);
    WebView wb = (WebView) a.findViewById(R.id.webview);
    a.initWebView();
}

But now I should say there are still an important issue. I can play it only once. The second time I click on the video dispatcher (either the poster or some play button), it does nothing.

I would also like the video to play inside the WebView frame, instead of opening the Media Player window, but this is for me a secondary issue.

I hope it helps somebody, and I would also thank any comment or suggestion.

Saludos, terrícolas.

这篇关于WebView 和 HTML5 &lt;video&gt;的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆