WebView视屏全屏切换,完美实现

在日常的开发过程中,很多时候需要加h5界面,界面中有视屏播放,但是怎么才能使得webView里面的视屏全屏播放呢??????


??????

首先,webView是不能讲视频播放的区域全屏的,所以,需要全屏播放还需要自己试想


大致的步骤有三部:

1、在布局中增加一个空容器,用来全屏播放,首先是隐藏的


    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"); // 注册nativejs的交互接口

重要的是设置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;
    }
}



打完收工!!!!!!!

















本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部