android webview 视频全屏

问题

android webview 视频全屏

场景

实现

参考方案：https://juejin.cn/post/6884974474693705742

补充实现

信息：

• android webview 无法直接获取视频的宽高比例，h5可以；
• android WebChromeClient 可以监听全屏进入退出事件；
• android 可以控制横竖屏；

思路：

• h5获取视频的宽高；
• android WebChromeClient 监听全屏事件并仅处理是否全屏；
• h5桥接控制横竖屏；

主要代码：

js:

<script>
        var video = document.getElementsByTagName("video")[0];
        video.addEventListener("webkitfullscreenchange", function () {
            if (document.webkitIsFullScreen) {
                let videoWidth = video.videoWidth;
                let videoHeight = video.videoHeight;
                if(videoWidth>videoHeight){
                    window.setAppLandscape.postMessage("");
                }
            }
        });
</script>

android：

private class OrientationLandscapeBridge{
    @JavascriptInterface
    @SuppressWarnings("unused")
    public void postMessage(String s){
        try {
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
        }catch (Exception e){e.printStackTrace();}
    }
}