Android WebView html5 视频强制全屏答案

【问题标题】：Android WebView html5 video force fullscreenAndroid WebView html5 视频强制全屏
【发布时间】：2013-08-23 14:28:45
【问题描述】：

我已经研究这个问题至少一周了。我已经阅读了 StackOverflow 中关于它的所有帖子，但我仍然没有找到解决方案，我开始认为这是不可能的。

我想在嵌入在这样布局中的 webview 中显示 HTML：

问题在于，如果该 HTML 代码中包含 HTML5 视频，则由于 Android 操作系统中的错误，它会被裁剪：Link to bug。

我尝试了很多解决方法，但似乎都没有奏效。我最后一次尝试是为低于 Jelly Bean 的设备全屏显示视频（他们已修复此版本的错误）。

我对必须显示的 HTML 没有任何控制，所以我发现做某事的唯一方法是注入 javascript 代码。现在，我正在同时处理 onShowCustomView 以使其全屏显示。

setWebViewClient(new WebViewClient() {

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        if (android_sdk < JELLY_BEAN) {
            detectVideoOnWebPage();
        }
    }
});

private void detectVideoOnWebPage() {
    // Run javascript code that detects the video end and notifies the
    // interface
    String js = "javascript:";
    js += "_ytrp_html5_video = document.getElementsByTagName('VIDEO')[0];";
    js += "if (_ytrp_html5_video !== undefined) {";
    {

        js += "_ytrp_html5_video.webkitEnterFullScreen();";
        js += "_VideoEnabledWebView.notifyVideoPresence();";
        js += "function video_start_playing() {";
        {
            js += "_VideoPlayed.notifyVideoStarted();";
            js += "ev.target.removeEventListener('playing', video_start_playing);";

        }
        js += "}";
        js += "ev.target.addEventListener('playing', video_start);";
    }
    js += "} else if (document.getElementsByTagName('iframe')) {";
    {
        js += "_VideoEnabledWebView.notifyVideoPresence();";
    }
    js += "} else {";
    {
        js += "var handler = function(ev) {";
        {
            js += "if (ev.target.nodeName.toUpperCase() === \"VIDEO\".toUpperCase()) {";
            {
                js += "function video_start_playing() {";
                {
                    js += "_VideoPlayed.notifyVideoStarted();";
                    js += "ev.target.webkitEnterFullScreen();";
                }
                js += "}";
                js += "ev.target.addEventListener('play', video_start_playing);";
                js += "_VideoDetected.notifyVideoPresence();";
                js += "document.removeEventListener (\"DOMNodeInserted\", handler);";
            }
            js += "} else {";
            {
                js += "_ytrp_html5_video = document.getElementsByTagName('VIDEO')[0];";
                js += "if (_ytrp_html5_video !== undefined) {";
                {
                    js += "_VideoEnabledWebView.notifyVideoPresence();";
                }
            }
            js += "};";
        }
        js += "};";
        js += "document.addEventListener (\"DOMNodeInserted\", handler);";
    }
    js += "}";
    loadUrl(js);
}

我的目标是：

检测 html 何时包含 html5 视频。
对于低于 Jelly Bean 的操作系统版本，强制全屏。

现在，我已经到达：

对于低于 Ice Cream Sandwich 的版本，不在 iframe 内的 html5 视频以全屏模式显示（ICS 忽略 webkitEnterFullScreen）

【问题讨论】：

我不得不深思熟虑，试图收集相关信息；这个问题是追逐“圣杯”的结果吗？ [x 平台开发]
是的。只是为了让你知道我有多绝望，我试图模拟全屏按钮上的触摸事件:)

标签： android android-webview html5-video android-videoview android-fullscreen

【解决方案1】：

您可以请求全屏播放事件，如下所示：

var element = document.getElementById("video");
element.addEventListener("playing", function() {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
}, false);

【讨论】：

【解决方案2】：

您可以尝试在 ICS 上为我工作的 webView 设置用户代理，如下所示：

String ua = "Mozilla/5.0 (Android; Tablet; rv:20.0) Gecko/20.0 Firefox/20.0";

WebSettings s = webView.getSettings();
s.setUserAgentString(ua);

如果它不起作用，look at this link for other user agents。

祝你好运

【讨论】：