투케이2K

119. (TWOK/WORK) [개발 요청] 안드로이드 ( android ) 웹뷰 화면에서 비디오 재생 시 전체 화면 전환 기능 개발 요청 - Video Full Screen 본문

투케이2K 업무정리

119. (TWOK/WORK) [개발 요청] 안드로이드 ( android ) 웹뷰 화면에서 비디오 재생 시 전체 화면 전환 기능 개발 요청 - Video Full Screen

투케이2K 2024. 11. 20. 19:57

[제 목]

[개발 요청] 안드로이드 ( android ) 웹뷰 화면에서 비디오 재생 시 전체 화면 전환 기능 개발 요청 - Video Full Screen

 

[내 용]

 

------------------------------------------------------------------------------
[개선 요청 사항]
------------------------------------------------------------------------------

1. 안드로이드 ( android ) 웹뷰 화면에서 비디오 재생 시 전체 화면 전환 기능 개발 요청

2. 기존 정책 : 웹뷰 화면에서 비디오 재생 시 전체 화면 없이 웹 화면 사이즈에 맞게 재생 수행

  >> 네이티브 연동 처리를 하지 않게 초기 개발 진행

------------------------------------------------------------------------------
[원인 파악 및 증상 재현]
------------------------------------------------------------------------------

1. 애플리케이션 실행 및 웹뷰 화면 로드 수행


2. 특정 웹뷰 화면에서 비디오 재생 수행 실시


3. 웹뷰 비디오 태그에서 전체 화면 [] 아이콘 클릭 수행


4. 휴대폰 전체 화면 전환 없이 기존 웹 화면 상태로 비디오 재생 확인

------------------------------------------------------------------------------
[조치 내용]
------------------------------------------------------------------------------

1. 안드로이드 WebChromeClient 에서 onShowCustomView , onHideCustomView 메소드 상속 받은 후 
   비디오 전체 화면 및 전체 화면 종료 이벤트 처리 수행

    // ----------------------------------------------
    // TODO [전역 변수 선언]
    // ----------------------------------------------
    View mCustomView = null;
    WindowManager windowManager = null;



    // ----------------------------------------------
    // TODO [webview 웹뷰 옵션 설정 수행]
    // ----------------------------------------------
    main_webview.getSettings().setJavaScriptEnabled(true);
    main_webview.getSettings().setDomStorageEnabled(true);
    main_webview.getSettings().setMediaPlaybackRequiresUserGesture(false);



    // ----------------------------------------------
    // TODO [setWebChromeClient 생성 및 비디오 태그 전체 화면 처리 수행]
    // ----------------------------------------------
    main_webview.setWebChromeClient(new WebChromeClient() {

        // TODO [비디오 태그 전체 화면 클릭 시 호출 됨]
        @Override
        public void onShowCustomView(View view, CustomViewCallback callback) {
            S_Log._W_("WebChromeClient :: onShowCustomView :: Start", null);

            // [이미 생성 된 뷰가 있으면 제거 수행]
            if (mCustomView != null) {
                callback.onCustomViewHidden();
                return;
            }

            // [사전 API 레벨 체크 및 퍼미션 권한 부여]
            if (Build.VERSION.SDK_INT >= 23) {
                if (!Settings.canDrawOverlays(A_Webview.this)) {
                    S_Log._E_("WebChromeClient :: onHideCustomView :: Permission Not Grant", null);

                    Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
                            Uri.parse("package:" + getPackageName()));
                    intent.addFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION);
                    startActivity(intent);

                    main_webview.reload(); // [웹뷰 리로드 처리]
                    return;
                }
            }

            // [비디오 태그 재생 화면 전체 화면 전환] : [mCustomView 뷰 할당]
            mCustomView = view;
            mCustomView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE);

            // [WindowManager 생성 뷰 최상단 표시 설정]
            try {
                windowManager = (WindowManager) getSystemService(Context.WINDOW_SERVICE);

                int LAYOUT_FLAG;
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
                    LAYOUT_FLAG = WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY;
                } else {
                    LAYOUT_FLAG = WindowManager.LayoutParams.TYPE_PHONE;
                }

                WindowManager.LayoutParams params = new WindowManager.LayoutParams(
                        WindowManager.LayoutParams.MATCH_PARENT, // 프레임 최대 크기
                        WindowManager.LayoutParams.MATCH_PARENT, // 프레임 최대 크기
                        LAYOUT_FLAG, // API 레벨에 따라 TYPE_SYSTEM_ALERT 등을 사용 필요
                        //WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE | WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN | WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE, // 윈도우가 포커스를 가져오지 않도록 설정
                        WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN | WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
                        PixelFormat.TRANSLUCENT);

                // 윈도우 초기 위치 설정
                params.gravity = Gravity.START | Gravity.TOP;
                params.x = 0;
                params.y = 100;

                // 윈도우 뷰 추가
                windowManager.addView(mCustomView, params);
            }
            catch (Exception e){
                e.printStackTrace();
            }

            // [super.onShowCustomView]
            super.onShowCustomView(view, callback);

        }

        // TODO [비디오 태그 화면 전체 >> 축소 시 이벤트 발생 확인]
        @Override
        public void onHideCustomView() {
            super.onHideCustomView();
            S_Log._E_("WebChromeClient :: onHideCustomView :: Start", null);
            
            // [사전 null 체크 및 리턴 수행]
            if (mCustomView == null || windowManager == null) {
                return;
            }
            
            
            // [뷰 제거 및 null 초기화]
            windowManager.removeView(mCustomView);
            mCustomView = null;
            windowManager = null;
        }

    });

------------------------------------------------------------------------------
[참고 사이트]
------------------------------------------------------------------------------

[안드로이드 : Webview 웹뷰 onShowCustomView , onHideCustomView 사용해 비디오 재생 전체 화면 및 닫기 처리]

https://blog.naver.com/kkh0977/223666521449

------------------------------------------------------------------------------

 

반응형
Comments