Android WebView 视频播放解决

最近项目中遇到WebView 播放视频需求（H5 video 标签)，那么问题来了视频无法全屏播放等。

对于这种视频播放问题有多种方案可以解决，例如：

1.实现一个网络视频播放器来播放网络视频（这个方案如果不利用开源的框架，实现起来费时费力）

2.自定义WebView实现利用H5的Video标签来播放视频（可以解决基本的视频播放需求，但是可能很多效果难以实现，比如手势控制等）

下面介绍第二种解决方案：

需要我们自定义WebView 来实现。

分步指南

新建一个Activity 来播放视频（ PlayVideoWebViewActivity）
这个activity的布局非常简单，就是一个简单的 WebView，布局文件如下：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/container"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical">

 <FrameLayout
 android:id="@+id/video_view"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:visibility="gone">

 </FrameLayout>

 <WebView
 android:id="@+id/video_webview"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"/>

 <ImageView
 android:id="@+id/goback"
 android:layout_width="45dp"
 android:layout_height="45dp" />
</FrameLayout>

可以看到布局文件中除了一个WebView 还有一个 FrameLayout id/video_view，这个FrameLayout 其实就是我们用来解决全屏播放的。

初始化View

private void initwidget() {
// TODO Auto-generated method stub
 videoview = (FrameLayout) findViewById(R.id.video_view);
 videowebview = (WebView) findViewById(R.id.video_webview);
 back = (ImageView) findViewById(R.id.goback) ;
 back.setOnClickListener(new Listener());
 WebSettings ws = videowebview.getSettings();
 /**
 *
 * setAllowFileAccess 启用或禁止WebView访问文件数据 setBlockNetworkImage 是否显示网络图像
 * setBuiltInZoomControls 设置是否支持缩放 setCacheMode 设置缓冲的模式
 * setDefaultFontSize 设置默认的字体大小 setDefaultTextEncodingName 设置在解码时使用的默认编码
 * setFixedFontFamily 设置固定使用的字体 setJavaSciptEnabled 设置是否支持Javascript
 * setLayoutAlgorithm 设置布局方式 setLightTouchEnabled 设置用鼠标激活被选项
 * setSupportZoom 设置是否支持变焦
 * */
 ws.setBuiltInZoomControls(true);// 隐藏缩放按钮
 ws.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);// 排版适应屏幕
 ws.setUseWideViewPort(true);// 可任意比例缩放
 ws.setLoadWithOverviewMode(true);// setUseWideViewPort方法设置webview推荐使用的窗口。setLoadWithOverviewMode方法是设置webview加载的页面的模式。
 ws.setSavePassword(true);
 ws.setSaveFormData(true);// 保存表单数据
 ws.setJavaScriptEnabled(true);
 ws.setGeolocationEnabled(true);// 启用地理定位
 ws.setGeolocationDatabasePath("/data/data/org.itri.html5webview/databases/");// 设置定位的数据库路径
 ws.setDomStorageEnabled(true);
 mWebchromeclient = new mWebChromeClient();
 videowebview.setWebChromeClient(mWebchromeclient);
 videowebview.setWebViewClient(new xWebViewClientent());

}

下面重点来了
自定义 mWebChromeClient 继承 WebChromeClient。实现对全屏操作的处理，及默认播放图标，Html 页面标题等。

/**
 * 处理Javascript的对话框、网站图标、网站标题以及网页加载进度等
 *
 * @author
 **/
 public class mWebChromeClient extends WebChromeClient {
private Bitmap xdefaltvideo;
 private View xprogressvideo;

 @Override
 //播放网络视频时全屏会被调用的方法
 public void onShowCustomView(View view, WebChromeClient.CustomViewCallback callback) {setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
 videowebview.setVisibility(View.GONE);
 //如果一个视图已经存在，那么立刻终止并新建一个
 if (xCustomView != null) {callback.onCustomViewHidden();
 return;
 }
videoview.addView(view);
 xCustomView = view;
 xCustomViewCallback = callback;
 videoview.setVisibility(View.VISIBLE);
 }@Override
 //视频播放退出全屏会被调用的
 public void onHideCustomView() {
if (xCustomView == null)//不是全屏播放状态
 return;
 // Hide the custom view.
 setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
 xCustomView.setVisibility(View.GONE);
 // Remove the custom view from its container.
 videoview.removeView(xCustomView);
 xCustomView = null;
 videoview.setVisibility(View.GONE);
 xCustomViewCallback.onCustomViewHidden();
 videowebview.setVisibility(View.VISIBLE);
 }// //视频加载添加默认图标
// @Override
// public Bitmap getDefaultVideoPoster() {
// //Log.i(LOGTAG, "here in on getDefaultVideoPoster");
// if (xdefaltvideo == null) {
// xdefaltvideo = BitmapFactory.decodeResource(getResources(), R.drawable.seach_icon);
// }
// return xdefaltvideo;
// }

 //视频加载时进程loading
// @Override
// public View getVideoLoadingProgressView() {
// //Log.i(LOGTAG, "here in on getVideoLoadingPregressView");
// if (xprogressvideo == null) {
// LayoutInflater inflater = LayoutInflater.from(PlayVideoWebViewActivity.this);
// xprogressvideo = inflater.inflate(R.layout.video_loading_progress, null);
// }
// return xprogressvideo;
// }

 //网页标题
 @Override
 public void onReceivedTitle(WebView view, String title) {(PlayVideoWebViewActivity.this).setTitle(title);
 }}

实现横竖屏切换

/**
 * * 当横竖屏切换时会调用该方法
 * * @author
 */
@Override
public void onConfigurationChanged(Configuration newConfig) {Log.i("testwebview", "=====<<< onConfigurationChanged >>>=====");
 super.onConfigurationChanged(newConfig);
 if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {Log.i("webview", " 现在是横屏1");
 islandport = false;
 } else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT) {Log.i("webview", " 现在是竖屏1");
 islandport = true;
 }
}

添加按键监听，实现音量+/-，实现全屏模式下返回退出全屏，实现退出播放操作等。

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {AudioManager mAudioManager = (AudioManager) getSystemService(Context.AUDIO_SERVICE);
 int currentVolume = mAudioManager.getStreamVolume(AudioManager.STREAM_MUSIC);

 if (keyCode == KeyEvent.KEYCODE_BACK) {
if (inCustomView()) {hideCustomView();
 return true;
 } else {
videowebview.loadUrl("about:blank");
 videowebview = null;
 this.finish();
 }}if (keyCode == KeyEvent.KEYCODE_VOLUME_UP){//音量+
 mAudioManager.setStreamVolume(AudioManager.STREAM_MUSIC, currentVolume+1, 1);
 }
if (keyCode == KeyEvent.KEYCODE_VOLUME_DOWN){//音量-
 mAudioManager.setStreamVolume(AudioManager.STREAM_MUSIC, currentVolume-1, 1);
 }
return true;
}

/**
 * 判断是否是全屏
 *
 * @return
 */
public boolean inCustomView() {return (xCustomView != null);
}/**
 * 全屏时按返加键执行退出全屏方法
 */
public void hideCustomView() {mWebchromeclient.onHideCustomView();
}

上面可以看到返回退出播放时webview加载了一个空白页面，这样做的目的是如果不加载空白页面，会出现界面退出了但是声音还存在，也就没有回收资源。

实现全屏，去掉应用标题及手机状态栏

@Override
protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);
 requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉应用标题
 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
 setContentView(R.layout.activity_play_video_web_view);
 //setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
 initwidget();
 url = getIntent().getStringExtra("url");
 videowebview.loadUrl(url);
}

完整类文件http://download.csdn.net/detail/qq1805812268/9515793

号外：
1.该Activity要允许横屏

<activity
    android:name=".guide.activity.PlayVideoWebViewActivity"
    android:configChanges="orientation|keyboardHidden|screenSize"
    >

2.硬件加速

android:hardwareAccelerated="true"

Android WebView 视频播放解决相关推荐

Android WebView 视频播放，全屏按钮不显示或灰显解决方案
Android WebView 视频播放,全屏按钮不显示或灰显解决方案背景问题定位背景在Android开发中,遇到了如下问题:Activity内嵌WebView,加载有视频的页面时,视频无法全 ...
android WebView多标签，加速解决卡顿，视频播放笔记
android硬件加速 android:hardwareAccelerated="true" WebView控件加速配置 //加速丝滑getBinding().web.setLay ...
android资源加载失败,解决Android WebView拦截url,视频播放加载失败的问题
解决Android WebView拦截url,视频播放加载失败的问题发布时间:2020-10-08 05:19:44 来源:脚本之家阅读:86 作者:灵均子孟需求:Android调用webVie ...
Android webview 写入cookie的解决方法以及一些属性设置
Android webview 写入cookie的解决方法以及一些属性设置参考文章: (1)Android webview 写入cookie的解决方法以及一些属性设置 (2)https://www. ...
android webview file,Android WebView 不支持 H5 input type=file 解决方法
最近因为赶项目进度,因此将本来要用原生控件实现的界面,自己做了H5并嵌入webview中.发现点击H5中 input type="file" 标签不能打开android资源管理器 ...
android 服务器返回302,Android WebView 内处理302重定向不跳转的解决
最近项目中Webview加载第三方的具有302的重定向,但是却发现却没有重新跳转.最后发现问题如下: public boolean shouldOverrideUrlLoading(WebView v ...
android webview 设置cookie时间,解决Android webview设置cookie和cookie丢失的问题
Android页面嵌套了一个h5,H5页面内部有用户登陆页面,发现h5页面的登陆功能无法使用,一直登陆失败.和web那边商量一会,发现js写入的cookie丢失了.所有需要Android这边在重写写入 ...
android——webview解决goback()后，界面会刷新的问题
android--webview解决goback()后,界面会刷新的问题参考文章: (1)android--webview解决goback()后,界面会刷新的问题 (2)https://www.cn ...
android默认视频播放器,WebView不打开android默认视频播放器？
当我在我的android设备的默认网页浏览器上查看this page并点击第一个视频时,它会触发我设备的默认视频播放器.它加载和播放.WebView不打开android默认视频播放器? 但是,当我在我 ...

Android WebView 视频播放解决

分步指南

Android WebView 视频播放解决相关推荐

最新文章

热门文章