Android开发之在Webview中全屏播放视频

迈不过友情╰ 2021-10-30 00:04 591阅读 0赞

> 【版权申明】非商业目的可自由转载  
> 博文地址：https://blog.csdn.net/ShuSheng0007/article/details/99702252  
> 出自：shusheng007

系列文章  
[Android开发之Webview中原生与JS交互][Android_Webview_JS]  
[Android开发之从Webview中选择本机文件][Android_Webview]

### 文章目录 ###

*  概述
 *  实现方法
 *  方案实施
 *   *  准备\`\`标签
     *  配置宿主Activity
     *  配置WebView
     *  重写WebChromeClient
 *  总结

# 概述 #

出于对成本或者其他原因的考虑，在移动开发中有时会采用混合开发的方式,其中一种方式就是让Web页面跑在原生的`WebView`里面。本文我们来谈论一下如何在`webview`中全屏播放视频。

# 实现方法 #

本文只谈论如何支持使用 **HTML** 的`<video>`标签播放视频时的全屏问题。在这个方面，`IOS`开发的简单性又一次碾压`Android`,`IOS`不需要写任何代码，内置的`WebView` 就可以很好的支持`<video>`标签的全屏播放，但是`Android`却不行。Android 需要重写`WebChromeClient` 里的`onShowCustomView(View view, CustomViewCallback callback)`与`onHideCustomView()`这两个方法。

**`onShowCustomView()`**: 通知宿主程序，当前页面已经进入全屏模式了。  
**`onHideCustomView()`** : 通知宿主程序，当前页面已经退出全屏模式。

# 方案实施 #

## 准备`<video>`标签 ##

<video id="banner-video" controls="controls" style="width: 100%;height: auto;">
        <source src="要播放视频的URL" , type="video/mp4">
        Your browser does not support HTML5 video.
    </video>

## 配置宿主Activity ##

注意设置开启硬件加速。

## 配置WebView ##

WebSettings settings = mWebView.getSettings();
    settings.setJavaScriptCanOpenWindowsAutomatically(true);
    settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
    settings.setAllowFileAccess(true);
    settings.setDomStorageEnabled(true);
    settings.setUseWideViewPort(true); // 关键点
     mWebView.setWebViewClient(myWebViewClient);
    mWebView.setWebChromeClient(new InsideWebChromeClient());

## 重写WebChromeClient ##

private class InsideWebChromeClient extends WebChromeClient {
        private View mCustomView;
        private CustomViewCallback mCustomViewCallback;
    
        @Override
        public void onShowCustomView(View view, CustomViewCallback callback) {
            super.onShowCustomView(view, callback);
            if (mCustomView != null) {
                callback.onCustomViewHidden();
                return;
            }
            mCustomView = view;
            mFrameLayout.addView(mCustomView);
            mCustomViewCallback = callback;
            mWebView.setVisibility(View.GONE);
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
        }
    
        @Override
        public void onHideCustomView() {
            mWebView.setVisibility(View.VISIBLE);
            if (mCustomView == null) {
                return;
            }
            mCustomView.setVisibility(View.GONE);
            mFrameLayout.removeView(mCustomView);
            mCustomViewCallback.onCustomViewHidden();
            mCustomView = null;
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
            super.onHideCustomView();
        }
    }

经过以上3步基本上就可以实现全屏播放了。

此处再多讲一点，有时产品经理会要求我们实现自动全屏播放，你可以直接告诉他自动播放没有问题，但是自动全屏在Android上是不能实现的。因为Web设计者出于安全考虑是禁止这样做的，你可以想象一下，如果一个恶意程序在你点击了播放视频后直接全屏播放，霸占了你的整个屏幕，又不给你退出全屏的功能，逼迫你看完整个视频…

不过在实际开发过程中，对于某些机型通过不正当的，将来有可能被废弃的方式是可以做到的。通过使用`WebView`过时的API  
`loadUrl`，执行`v.requestFullscreen();` js 代码，如下所示

String js="javascript: var v=document.getElementById('banner-video'); v.requestFullscreen(); v.play();";
    mWebView.loadUrl(js);

由于行文需要，文中省略了很多细节，容易使人发生困扰， 强烈建议通过文章末尾提供GitHub地址查看源码，记得给个**Star**啊。

# 总结 #

用心传播知识，只为后辈生活更美好（少加班，多陪家人，或者有更多的时间去做其他有意义的事情）。

[GitHub源码地址][GitHub]

[Android_Webview_JS]: https://blog.csdn.net/ShuSheng0007/article/details/83049516
[Android_Webview]: https://blog.csdn.net/ShuSheng0007/article/details/97634019
[GitHub]: https://github.com/shusheng007/webviewTure