WebView中的视频全屏的相关操作

最近工作中，基本一直在用WebView,今天就把它整理下：

WebView 顾名思义，就是放一个网页，一个看起来十分简单，但是用起来不是那么简单的控件。

首先你肯定要定义，初始化一个webview，其实网上的例子很多，我这里就简单的把一些WebView 中可能会用到的的很重要的属性以及支持全屏播放视频该怎么实现的代码粘出来，直接放到项目中去就行了

<span style="white-space:pre"></span><pre name="code" class="java" style="font-size:18px;"><span style="white-space:pre">     </span>private WebView webview;<span style="font-family: Arial, Helvetica, sans-serif;">     </span>

<span style="white-space:pre">      </span>webview = (WebView) findViewById(R.id.webview);

  <span style="white-space:pre">        </span>// 设置WebView属性，能够执行Javascript脚本webview.getSettings().setJavaScriptEnabled(true);//设置WebView 可以加载更多格式页面
<span style="white-space:pre">     </span>webview.getSettings().setLoadWithOverviewMode(true);//设置WebView使用广泛的视窗
<span style="white-space:pre">     </span>webview.getSettings().setUseWideViewPort(true);//设置WebView的用户代理字符串。如果字符串“ua”是null或空,它将使用系统默认的用户代理字符串
<span style="white-space:pre">     </span>webview.getSettings().setUserAgentString();//支持手势缩放
<span style="white-space:pre">     </span>webview.getSettings().setBuiltInZoomControls(true);//支持2.2以上所有版本
<span style="white-space:pre">     </span>webview.getSettings().setPluginState(PluginState.ON);//告诉webview启用应用程序缓存api。
<span style="white-space:pre">     </span>webview.getSettings().setAppCacheEnabled(true);//设置是否启用了DOM storage API。
<span style="white-space:pre">     </span>webview.getSettings().setDomStorageEnabled(true);//自动打开窗口webview.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);// 没有的话会黑屏 支持插件webView.getSettings().setPluginsEnabled(true); /*** setAllowFileAccess 启用或禁止WebView访问文件数据 setBlockNetworkImage 是否显示网络图像* setBuiltInZoomControls 设置是否支持缩放 setCacheMode 设置缓冲的模式* setDefaultFontSize 设置默认的字体大小 setDefaultTextEncodingName 设置在解码时使用的默认编码* setFixedFontFamily 设置固定使用的字体 setJavaSciptEnabled 设置是否支持Javascript* setLayoutAlgorithm 设置布局方式 setLightTouchEnabled 设置用鼠标激活被选项* setSupportZoom 设置是否支持变焦* */// 排版适应屏幕.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);web// 设置Web试图 注意以下两个方法十分重要，很多需要重写：
<span style="white-space:pre">     </span>//首先设置自定义的WebChromeClient来设置视频播放的一些问题busWiFiWebView.setWebChromeClient(new DefaultWebChromeClient());busWiFiWebView.setWebViewClient(new DefaultWebViewClientClient());

第一个方法：WebChromeClient：
//要重写其中的onShowCustomView 方法表示进入全屏的时候，以及onHideCustomView 表示退出全屏的时候

界面的话，就是一个webview ,一个FrameLayout ,当全屏的时候就设置webview 隐藏，让FrameLayout全屏显示出来，那么视频就自动跑到FrameLayout这里面放了。退出全屏的时候，一样道理，这里要用到回调函数，自己理解吧。。。我讲的不好。。。

private class DefaultWebChromeClient extends WebChromeClient {// 一个回调接口使用的主机应用程序通知当前页面的自定义视图已被撤职CustomViewCallback customViewCallback;// 进入全屏的时候@Overridepublic void onShowCustomView(View view, CustomViewCallback callback) {// 赋值给callbackcustomViewCallback = callback;// 设置webView隐藏webview.setVisibility(View.GONE);// 声明video，把之后的视频放到这里面去FrameLayout video = (FrameLayout) findViewById(R.id.video);// 将video放到当前视图中video.addView(view);// 横屏显示setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);// 设置全屏setFullScreen();}// 退出全屏的时候@Overridepublic void onHideCustomView() {if (customViewCallback != null) {// 隐藏掉customViewCallback.onCustomViewHidden();}// 用户当前的首选方向setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_USER);// 退出全屏quitFullScreen();// 设置WebView可见webview.setVisibility(View.VISIBLE);}@Overridepublic void onProgressChanged(WebView view, int newProgress) {super.onProgressChanged(view, newProgress);}}

下面是两个方法，设置全屏和退出全屏的方法：注意，我捕捉到了，全屏状态下和窗口状态下他们分别的Flags数值。可见如下代码

/*** 设置全屏*/private void setFullScreen() {// 设置全屏的相关属性，获取当前的屏幕状态，然后设置全屏getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);// 全屏下的状态码：1098974464// 窗口下的状态吗：1098973440}/*** 退出全屏*/private void quitFullScreen() {// 声明当前屏幕状态的参数并获取final WindowManager.LayoutParams attrs = getWindow().getAttributes();attrs.flags &= (~WindowManager.LayoutParams.FLAG_FULLSCREEN);getWindow().setAttributes(attrs);getWindow().clearFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);}

第二个自定义的WebViewClient,继承WebViewClient

/*** 使用系统默认webview*/private class DefaultWebViewClientClient extends WebViewClient {@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {

<span style="white-space:pre">          </span>return super.shouldOverrideUrlLoading(view, url);//如果要下载页面中的游戏或者继续点击网页中的链接进入下一个网页的话，重写此方法下，不然就会跳到手机自带的浏览器了，而不继续在你这个webview里面展现了}@Overridepublic void onReceivedError(WebView view, int errorCode,String description, String failingUrl) {<span style="white-space:pre"> </span>//想在收到错误信息的时候，执行一些操作，走此方法}@Overridepublic void onPageStarted(WebView view, String url, Bitmap favicon) {super.onPageStarted(view, url, favicon);//想在页面开始加载的时候，执行一些操作，走此方法}@Overridepublic void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);//想在页面加载结束的时候，执行一些操作，走此方法}}

最后还有一点很重要，要想进入同过webview浏览网页，而且点返回键是想在webview中返回，而不是直接退出程序，那么就得重写onKeyDown方法。还有

@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {if (keyCode == KeyEvent.KEYCODE_BACK) {WebView webView = (WebView) findViewById(R.id.webview_passenger);if (webView.canGoBack()) {// goBack()表示返回WebView的上一页面webView.goBack();//退出全屏quitFullScreen();} else {}return true;}return super.onKeyDown(keyCode, event);}

有什么问题，可以联系我哈，就在下面留言就好啦，天天在线的。。。

恩，综上，就这么多了，研究了好几天。附上一份不错的Demo吧，原Demo要3点积分，我作为VIP就免费下下来给大家了

Demo下载地址：http://download.csdn.net/detail/lygscg123/7673123

WebView中的视频全屏的相关操作相关推荐

移动端页面中阻止视频全屏播放
最近公司的项目中出了需要在局部播放视频的需求,我们都知道HTML5中有一个专门的标签video用来嵌入视频.不过,这个video标签有很多的属性可能很多同学并不是很熟悉,下面我们来认识一下: 在网页里 ...
html5仿抖音全屏播放,仿抖音视频全屏播放滑动切换
1 前言随着移动技术的快速迭代,数据流量费用的快速下降,视频.直播正成为全民的媒体盛宴,我司必然也不会缺席此次盛宴,这里讲述的是通过h5实现仿抖音视频全屏播放&滑动切换的效果,供我司直播鉴定 ...
微信视频播放器隐藏播放控件，视频全屏做法分享
转自:https://www.haorooms.com/post/weixin_hidevideo_control 本人实测有效.为了防止以后还要用到,到时候找不到,所以转载一下. 前言平时项目中视 ...
android中布局全屏,怎么在Android 应用中实现一个全屏与非全屏功能
怎么在Android 应用中实现一个全屏与非全屏功能发布时间:2020-12-04 17:31:45 来源:亿速云阅读:135 作者:Leah 怎么在Android 应用中实现一个全屏与非全屏功能 ...
手机移动端视频全屏播放（兼容Android与iOS）
在做移动端项目时,做个视频播放是不可避免的,大部分情况下都是点击一个按钮,视频全屏播放,下面将对这个情况进行分析与记录. html: <video height="100%" ...
Uniapp微信小程序视频全屏播放功能极简实现法
*高端的食材,往往只需要最朴素的烹饪方式,本文用css旋转定位实现视频全屏播放,朴实无华,简单实用,本文为原创,分享请标明出处* 实习入职第三周,在经过两周的改bug和切图之后,组里说给我一个有挑战性 ...
视频全屏非全屏切换，状态栏动态显示隐藏兼容性解决
列表中视频全屏/非全屏切换时,需要动态显示/隐藏状态栏 View类提供了setSystemUiVisibility和getSystemUiVisibility方法,这两个方法实现对状态栏的动态显示或隐 ...
excel2016html,Excel2016中切换至全屏视图的两种方法
在Excel工作表的使用过程中,有时因为工作表中的内容较多,无法在当前屏幕中完整显示,这时切换到全屏视图来查看要更方便一些.在Excel 2016中切换至全屏视图,主要有以下两种方法: 方法一:使用快 ...
html手机端自动全屏,HTML5在手机端实现视频全屏展示方法
最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能.测试了很久,终于找到解决办法. 第一种:将视频放大来控制. 视频在播放的时候,全屏是根据高度来的,如果设置视频 video 标签的宽度是 1 ...

WebView中的视频全屏的相关操作

WebView中的视频全屏的相关操作相关推荐

最新文章

热门文章