WebView视屏全屏切换,完美实现
在日常的开发过程中,很多时候需要加h5界面,界面中有视屏播放,但是怎么才能使得webView里面的视屏全屏播放呢????????????首先,webView是不能讲视频播放的区域全屏的,所以,需要全屏播放还需要自己试想大致的步骤有三部:1、在布局中增加一个空容器,用来全屏播放,首先是隐藏的播放全屏视频时用--><FrameLayoutandroi
·
在日常的开发过程中,很多时候需要加h5界面,界面中有视屏播放,但是怎么才能使得webView里面的视屏全屏播放呢??????
??????
首先,webView是不能讲视频播放的区域全屏的,所以,需要全屏播放还需要自己试想
大致的步骤有三部:
1、在布局中增加一个空容器,用来全屏播放,首先是隐藏的
<!--播放全屏视频时用--> <FrameLayout android:id="@+id/video_full_play" android:layout_width="fill_parent" android:layout_height="fill_parent" android:visibility="gone" />在activity中找到这个view
video_fullView= (FrameLayout) findViewById(R.id.video_full_play);
2、给WebView进行设置
常规设置:
WebSettings settings = mWebView.getSettings(); settings.setUseWideViewPort(true);// 可任意比例缩放 settings.setLoadWithOverviewMode(true);// setUseWideViewPort方法设置webview推荐使用的窗口。 settings.setDefaultTextEncodingName("utf-8"); settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN); settings.setUseWideViewPort(true); settings.setCacheMode(WebSettings.LOAD_NO_CACHE); // 默认不使用缓存 settings.setDomStorageEnabled(true); settings.setRenderPriority(WebSettings.RenderPriority.HIGH); settings.setSupportMultipleWindows(true); settings.setJavaScriptCanOpenWindowsAutomatically(true); settings.setJavaScriptEnabled(true); mWebView.addJavascriptInterface(this, "htmlInterface"); // 注册native与js的交互接口
重要的是设置setWebChromClent(),需要自己复写里面的几个方法,这里为了代码简单就使用MVP方式进行分类
接口,这个几口需要Activity实现,主要是用来设置全屏幕
public interface IWebPageView { /** * 进度条变化时调用 */ void progressChanged(int newProgress); /** * 播放网络视频全屏调用 */ void fullViewAddView(View view); void showVideoFullView(); void hindVideoFullView(); }
接下来就是重写Client
/** * Created by huguomin on 2017/12/8. */ public class MyWebChromeClient extends WebChromeClient { private FashionWebViewActivity mActivity; private IWebPageView mIWebPageView; private View mfullCustomView; private CustomViewCallback fullCustomViewCallback; private String mTitle; public MyWebChromeClient(IWebPageView mIWebPageView) { this.mIWebPageView = mIWebPageView; this.mActivity = (FashionWebViewActivity) mIWebPageView; //这个就是webview所在的Activity实例 } // 播放网络视频时全屏会被调用的方法 @Override public void onShowCustomView(View view, CustomViewCallback callback) { mActivity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE); // 如果一个视图已经存在,那么立刻终止并新建一个 if (mfullCustomView != null) { callback.onCustomViewHidden(); return; } mIWebPageView.fullViewAddView(view); mfullCustomView = view; //这个view就是webView中播放视频的窗口,我们只需要在将这个View全屏即可 mfullCustomViewCallback = callback; mIWebPageView.showVideoFullView(); } // 视频播放退出全屏会被调用的 @Override public void onHideCustomView() { if (mfullCustomView == null)// 不是全屏播放状态 return; mActivity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); mfullCustomView.setVisibility(View.GONE); if (mActivity.getVideoFullView() != null) { mActivity.getVideoFullView().removeView(mXCustomView); } mfullCustomView = null; mIWebPageView.hindVideoFullView(); mfullCustomViewCallback.onCustomViewHidden(); } // 视频加载时进程loading @Override public View getVideoLoadingProgressView() { return null; } @Override public void onProgressChanged(WebView view, int newProgress) { super.onProgressChanged(view, newProgress); mIWebPageView.progressChanged(newProgress); //加载页面的进度 } @Override public void onReceivedTitle(WebView view, String title) { super.onReceivedTitle(view, title); mTitle = title; } public String getTitle(){ return mTitle; } }
3、actvity中试想方法:
public FrameLayout getVideoFullView() { return videoFullView; } @Override public void progressChanged(int newProgress) { if (newProgress>70){ mSeekBar.setVisibility(View.INVISIBLE); }else{ mSeekBar.setProgress(newProgress); } } @Override public void fullViewAddView(View view) { FrameLayout decor = (FrameLayout) getWindow().getDecorView(); //全屏播放,将播放的View放在事先准备好的容器中,添加view videoFullView = new FullscreenHolder(this); videoFullView.addView(view); decor.addView(videoFullView); } public void hideCustomView() { mClient.onHideCustomView(); setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); //设置屏幕方向 } @Override public void showVideoFullView() { videoFullView.setVisibility(View.VISIBLE); //全屏,将事先准备好的容器可见 } @Override public void hindVideoFullView() { videoFullView.setVisibility(View.GONE); //退出全屏,将容器隐藏 }
4.漏掉了全屏的fullScreenHolder,就是全屏的时候讲背景设置成黑色
/** * Created by huguomin on 2017/12/8. */ public class FullscreenHolder extends FrameLayout { public FullscreenHolder(Context ctx) { super(ctx); setBackgroundColor(ctx.getResources().getColor(android.R.color.black)); } @Override public boolean onTouchEvent(MotionEvent event) { return true; } }
打完收工!!!!!!!
更多推荐
已为社区贡献1条内容
所有评论(0)