Android WebView html5 视频强制全屏

Posted 2023-05-07

【中文标题】Android WebView html5 视频强制全屏

【英文标题】：Android WebView html5 video force fullscreen

【发布时间】：2013-08-23 14:28:45

【问题描述】：

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

我想在嵌入在这样布局中的 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 平台开发]

是的。只是为了让你知道我有多绝望，我试图模拟全屏按钮上的触摸事件:)

【参考方案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。

祝你好运