在日常的开发过程中,很多时候需要加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"); // 注册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;
    }
}



打完收工!!!!!!!
















Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐