Android WebView 总结 —— 使用HTML5播放视频及全屏方案
在APP开发的过程中，会碰到需要在WebView中播放视频的需求，下面讲解一下如何在WebView中使用html5播放视频。
1.让视频在各个Android版本能够正常播放
<activity ... android:hardwareAccelerated="true" >
下面引申一下HardwareAccelerate声明的方式：
(a).如果需要声明整个应用都要加速，则在Application级别下面进行声明：
< application ... android:hardwareAccelerated ="true">
(b).如果需要某个Activity加速，则可以进行下面的声明：
<activity ... android:hardwareAccelerated="true" >
或者在代码里面进行动态的声明：
getWindow.setFlags(WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,
WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);
(c).如果Application和Activity都声明了HardwareAccelerate，但是由于某些特殊原因，一些View不需要硬件加速，那么在View里面设置：
view.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
完成声明操作后，基本上WebView就能够很好的支持在页面上播放视频了，下面展示的是在Html上的Viedeo的声明方法：
<!DOCTYPE html>
<html>
<body>
<video width="305" height="305" controls="controls" preload="none" poster="http://****.png" >
<source src="http://*****.mp4" type="video/mp4">
</video>
</body>
</html>
2. 视频播放的时候能够全屏
视频能播放，那么如何支持视频全屏播放呢？ 下面是针对全屏播放网页视频提供的解决办法：
public class WebVideoActivity extends Activity {
private WebView webView;
/** 视频全屏参数 */
protected static final FrameLayout.LayoutParams COVER_SCREEN_PARAMS = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
private View customView;
private FrameLayout fullscreenContainer;
private WebChromeClient.CustomViewCallback customViewCallback;
@Override
protected void onCreate(Bundle bundle) {
super.onCreate(bundle);
setContentView(R.layout.activity_xx);
webView = (WebView) findViewById(R.id.xx);
initWebView();
}
@Override
protected void onStop() {
super.onStop();
webView.reload();
}
/** 展示网页界面 **/
public void initWebView() {
WebChromeClient wvcc = new WebChromeClient();
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setUseWideViewPort(true); // 关键点
webSettings.setAllowFileAccess(true); // 允许访问文件
webSettings.setSupportZoom(true); // 支持缩放
webSettings.setLoadWithOverviewMode(true);
webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE); // 不加载缓存内容
webView.setWebChromeClient(wvcc);
WebViewClient wvc = new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
webView.loadUrl(url);
return true;
}
};
webView.setWebViewClient(wvc);
webView.setWebChromeClient(new WebChromeClient() {
/*** 视频播放相关的方法 **/
@Override
public View getVideoLoadingProgressView() {
FrameLayout frameLayout = new FrameLayout(WebVideoActivity.this);
frameLayout.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
return frameLayout;
}
@Override
public void onShowCustomView(View view, CustomViewCallback callback) {
showCustomView(view, callback);
}
@Override
public void onHideCustomView() {
hideCustomView();
}
});
// 加载Web地址
webView.loadUrl(webUrl);
}
/** 视频播放全屏 **/
private void showCustomView(View view, CustomViewCallback callback) {
// if a view already exists then immediately terminate the new one
if (customView != null) {
callback.onCustomViewHidden();
return;
}
WebVideoActivity.this.getWindow().getDecorView();
FrameLayout decor = (FrameLayout) getWindow().getDecorView();
fullscreenContainer = new FullscreenHolder(WebVideoActivity.this);
fullscreenContainer.addView(view, COVER_SCREEN_PARAMS);
decor.addView(fullscreenContainer, COVER_SCREEN_PARAMS);
customView = view;
setStatusBarVisibility(false);
customViewCallback = callback;
}
/** 隐藏视频全屏 */
private void hideCustomView() {
if (customView == null) {
return;
}
setStatusBarVisibility(true);
FrameLayout decor = (FrameLayout) getWindow().getDecorView();
decor.removeView(fullscreenContainer);
fullscreenContainer = null;
customView = null;
customViewCallback.onCustomViewHidden();
webView.setVisibility(View.VISIBLE);
}
/** 全屏容器界面 */
static class FullscreenHolder extends FrameLayout {
public FullscreenHolder(Context ctx) {
super(ctx);
setBackgroundColor(ctx.getResources().getColor(android.R.color.black));
}
@Override
public boolean onTouchEvent(MotionEvent evt) {
return true;
}
}
private void setStatusBarVisibility(boolean visible) {
int flag = visible ? 0 : WindowManager.LayoutParams.FLAG_FULLSCREEN;
getWindow().setFlags(flag, WindowManager.LayoutParams.FLAG_FULLSCREEN);
}
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
switch (keyCode) {
case KeyEvent.KEYCODE_BACK:
/** 回退键 事件处理 优先级:视频播放全屏-网页回退-关闭页面 */
if (customView != null) {
hideCustomView();
} else if (webView.canGoBack()) {
webView.goBack();
} else {
finish();
}
return true;
default:
return super.onKeyUp(keyCode, event);
}
}
}
在onShowCustomView方法中，将获取到的view放到当前Activity的最上方，在onHideCustomView中，将之前的view隐藏或者删除，将原来被覆盖的webview放回来。
Android WebView 总结 —— 使用HTML5播放视频及全屏方案的更多相关文章
- CKPlayer 只调用HTML5播放器时全屏问题 这只是Chrome浏览器的渲染bug
如题,在系统中使用CKPlayer播放器,一切顺利,偶然发现没有全屏按钮, 正常的全屏按钮是这样的: 经过一步步调试,发现问题出在iframe, 当视频页面在iframe内时,全屏按钮不显示了,这个和 ...
- 不完全解决Android微信HTML5 播放视频的问题(不显示控制条，可交互)
首先你需要知道以下内容: http://ad.weixin.qq.com/learn/2-3-3--%E9%80%9A%E7%94%A8%E5%BA%93 这是微信为广告商开放的API,我一直认为只有 ...
- 如何禁止 iPhone Safari video标签视频自动全屏？
最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签).如: <video id="post" autoplay ...
- 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...
- [JavaScript] 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的 效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以 让页面中的图片,视频等全屏目前只有g ...
- 阻止 iPhone 视频自动全屏
最近一年都在做直播,遭video 全屏的问题困扰了很久.下面将阻止 ios视频自动全屏的办法写出来.添加 playsinline 和 webkit-playsinline="true&quo ...
- 可嵌入图片视频jQuery全屏滑块
分享一款可嵌入图片视频jQuery全屏滑块.这是一款可定制的滑块幻灯片代码,支持键盘箭头切换.效果图如下: 在线预览 源码下载 实现的代码. html代码: <script type ...
- Chrome浏览器中使用 iframe 嵌入网页导致视频不能全屏的问题解决方法
今天无意中测试了下在 iframe 中嵌入视频, 发现全屏按钮在 Chrome 浏览器中居然无效, 试了好几个视频网站的视频都不能全屏, 但在其他浏览器中似乎都很正常, 应该是 Chrome 60 新 ...
- 【转】Android HTML5 Video视频标签自动播放与自动全屏问题解决
为了解决 HTML5Video视频标签自动播放与全屏问题,在网上找了很多相关资料,网上也很多关于此问题解决方法,但几乎都不能解决问题,特别对各大视频网站传回来的html5网页视频自动播放与全屏问题,我 ...
随机推荐
- ERDAS文件格式：IGE、IMG、RRD、AUX
ERDAS如果需要打开大于2GB的文件,ERDAS需要把文件转换成IMG格式.这时候,ERDAS自动生成三个文件,分别是IMG.IGE和RRD文件,其中:1.IGE:是数据文件,实际用来存储栅格数据: ...
- Python爬虫入门案例：获取百词斩已学单词列表
百词斩是一款很不错的单词记忆APP,在学习过程中,它会记录你所学的每个单词及你答错的次数,通过此列表可以很方便地找到自己在记忆哪些单词时总是反复出错记不住.我们来用Python来爬取这些信息,同时学习 ...
- Shmget 参数 0600的解释
Shmget 参数 0600的解释 0660 百位6 -- 本用户有读写权. 十位6 -- 同组用户有读写权,个位0 -- 其它用户无读写执行权.与chmod 设法一样.
- 关于MFC文本框输入内容的获取 与 设置文本框的内容
八月要开始做界面了<(￣︶￣)/,然而目前只会用MFC╮(╯▽╰)╭ 好吧,言归正传,设置好文本框后,要获取用户输入的内容,可以用: GetDlgItemText() ; 这个函数有两个参数,第 ...
- eclipse中输入中文为繁体
http://blog.163.com/guomaolin_gavin/blog/static/199618307201218104452930/ eclipse中输入中文为繁体! 2012-02-0 ...
- 在Windows用Rebar来构建，编译，测试，发布Erlang项目
rebar是一个遵循 Erlang/OTP 原则的 Erlang 项目构建工具,使用它可以减少构建标准 Erlang/OTP 项目架构配置的工作量,并且可以很容易的编译.测试.发布 Erlang 应用 ...
- pthread——pthread_cleanup
Pthread_cleanup用于注册线程清理函数,注册的清理函数将在线程被取消或者主动调用pthread_exit时被调用: 一个简单的示例: #include <pthread.h& ...
- VS2012配置使用ICE通信接口
1.下载安装Ice-3.5.1.msi http://www.zeroc.com/download.html 2.添加安装路径到环境变量path,D:\Program Files (x86)\Zero ...
- 【转载】NuGet镜像上线试运行
原文链接: http://www.cnblogs.com/cmt/p/nuget-mirror.html 在Visual Studio中的添加方法: 由于目前带宽有限,如果出现下面的问题,说明当前带宽 ...
- 记一次Redis和NetMQ的测试
Redis是一个高速缓存K-V数据库,而NetMQ是ZeroMQ的C#实现版本,两者是完全不同的东西. 最近做游戏服务器的时候想到,如果选择一个组件来做服务器间通信的话,ZeroMQ绝对是一个不错的选 ...