Android WebView视频全屏显示解决方案

Android WebView视频全屏显示解决方案

内容简介

Android WebView视频显示解决方案，支持WebView视频全屏显示和隐藏，支持设置视频海报，支持设置WebView加载进度View，支持WebView视频翻转

demo图片展示

核心源码

wv_web_view.setWebChromeClient(new WebChromeClient(){
    Bitmap mVideoPoster=null;
    View mVideoLoadingView=null;
    View mFullScreenView;

    /**
     * 设置默认的视频海报，也就是当html Video元素初始化完成后，默认显示在video窗口上的图片
     * @return
     */
    @Override
    public Bitmap getDefaultVideoPoster() {
        if(mVideoPoster==null){
            mVideoPoster=BitmapFactory.decodeResource(getResources(),R.drawable.kgd);
        }
        return mVideoPoster;
    }

    /**
     * 设置Html video元素的视频加载进度View
     * @return
     */
    @Override
    public View getVideoLoadingProgressView() {
        if(mVideoLoadingView==null){
            mVideoLoadingView=getLayoutInflater().inflate(R.layout.view_webview_loading,null);
        }
        return mVideoLoadingView;
    }

    private void showCustomView(Viewview,CustomViewCallback callback){
        mFullScreenView=view;
        fl_web_view.setVisibility(View.VISIBLE);
        AnimationHelper.alphaAnimation(fl_web_view, 0, 1, 500, new Runnable() {
            @Override
            public void run() {
                fl_web_view.addView(mFullScreenView);
            }
        });
    }

    /**
     * 要想让html video元素支持全屏播放，必须重载这个函数，当用户点击video元素上的全屏按钮时，WebView会调用这个函数来全屏显示视频
     * @param view
     * @param callback
     */
    @Override
    public void onShowCustomView(View view,CustomViewCallback callback) {
        super.onShowCustomView(view, callback);
        showCustomView(view,callback);
    }

    /**
     * 当WebView需要关闭全屏窗口的时候，回调这个函数，必须要重载这个函数，否则视频全屏播放窗口无法关闭
     */
    @Override
    public void onHideCustomView() {
        super.onHideCustomView();
        if(mFullScreenView==null) return;
        fl_web_view.removeView(mFullScreenView);
        AnimationHelper.alphaAnimation(fl_web_view, 1, 0, 500, new Runnable() {
            @Override
            public void run() {
                fl_web_view.setVisibility(View.GONE);
            }
        });
    }
});

 

自定义WebView默认视频海报

/**
     * 设置默认的视频海报，也就是当html Video元素初始化完成后，默认显示在video窗口上的图片
     * @return
     */
    @Override
    public Bitmap getDefaultVideoPoster() {
        if(mVideoPoster==null){
            mVideoPoster=BitmapFactory.decodeResource(getResources(),R.drawable.kgd);
        }
        return mVideoPoster;
    }

自定义WebView视频加载进度View

/**
     * 设置Html video元素的视频加载进度View
     * @return
     */
    @Override
    public View getVideoLoadingProgressView() {
        if(mVideoLoadingView==null){
            mVideoLoadingView=getLayoutInflater().inflate(R.layout.view_webview_loading,null);
        }
        return mVideoLoadingView;
    }

WebView视频全屏显示和隐藏

private void showCustomView(View view,CustomViewCallback callback){
        mFullScreenView=view;
        fl_web_view.setVisibility(View.VISIBLE);
        AnimationHelper.alphaAnimation(fl_web_view, 0, 1, 500, new Runnable() {
            @Override
            public void run() {
                fl_web_view.addView(mFullScreenView);
            }
        });
    }

    /**
     * 要想让html video元素支持全屏播放，必须重载这个函数，当用户点击video元素上的全屏按钮时，WebView会调用这个函数来全屏显示视频
     * @param view
     * @param callback
     */
    @Override
    public void onShowCustomView(View view,CustomViewCallback callback) {
        super.onShowCustomView(view, callback);
        showCustomView(view,callback);
    }

    /**
     * 当WebView需要关闭全屏窗口的时候，回调这个函数，必须要重载这个函数，否则视频全屏播放窗口无法关闭
     */
    @Override
    public void onHideCustomView() {
        super.onHideCustomView();
        if(mFullScreenView==null) return;
        fl_web_view.removeView(mFullScreenView);
        AnimationHelper.alphaAnimation(fl_web_view, 1, 0, 500, new Runnable() {
            @Override
            public void run() {
                fl_web_view.setVisibility(View.GONE);
            }
        });
    }

WebView视频翻转

要想让Activity页面翻转的时候Activity不被重建，我们必须要在manifest文件里面设置Activity的android:configChanges属性，同时为了让视频的显示效果更好，建议开启Activity的硬件加速，示例代码如下：

<activity android:name=".MainActivity"

    android:configChanges="orientation|keyboardHidden|screenSize"

    android:screenOrientation="fullUser"

    android:hardwareAccelerated="true">

    <intent-filter>

        <action android:name="android.intent.action.MAIN" />



        <category android:name="android.intent.category.LAUNCHER" />

    </intent-filter>

</activity>

 

源码下载

下载地址：http://download.csdn.net/download/kgdwbb/9739590

 

写在最后

如果大家喜欢本文章，请为本文点赞，你们的支持，是我继续写作的动力。