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

 

寫在最後

如果大家喜歡本文章，請爲本文點贊，你們的支持，是我繼續寫作的動力。