WebView视频全屏播放

Quibbler 27天前 122

WebView视频全屏播放


        在StackoverFlow上就看到一篇实现WebView全屏播放Youtube网页视频的方法,这个方法很不错。


        废话不多说,直接看操作:继承WebChromeClient,重写WebChromeClient中的onShowCustomView(View , CustomViewCallback)onHideCustomView()方法来实现网页视频全屏播放功能:

val chromeClient = object : WebChromeClient() {

    override fun onShowCustomView(view: View?, callback: CustomViewCallback?) {
        super.onShowCustomView(view, callback)
    }
    
    override fun onHideCustomView() {
        super.onHideCustomView()
    }
    
    //该方法已废弃
    @Deprecated("Deprecated in Java")
    override fun onShowCustomView(view: View?, requestedOrientation: Int, callback: CustomViewCallback?) {
        super.onShowCustomView(view, requestedOrientation, callback)
    }
    
}


        首先看onShowCustomView(View view, CustomViewCallback callback)方法

    /**
     * Notify the host application that the current page has entered full screen mode. After this
     * call, web content will no longer be rendered in the WebView, but will instead be rendered
     * in {@code view}. The host application should add this View to a Window which is configured
     * with {@link android.view.WindowManager.LayoutParams#FLAG_FULLSCREEN} flag in order to
     * actually display this web content full screen.
     *
     * <p>The application may explicitly exit fullscreen mode by invoking {@code callback} (ex. when
     * the user presses the back button). However, this is generally not necessary as the web page
     * will often show its own UI to close out of fullscreen. Regardless of how the WebView exits
     * fullscreen mode, WebView will invoke {@link #onHideCustomView()}, signaling for the
     * application to remove the custom View.
     *
     * <p>If this method is not overridden, WebView will report to the web page it does not support
     * fullscreen mode and will not honor the web page's request to run in fullscreen mode.
     *
     * <p class="note"><b>Note:</b> if overriding this method, the application must also override
     * {@link #onHideCustomView()}.
     *
     * @param view is the View object to be shown.
     * @param callback invoke this callback to request the page to exit
     * full screen mode.
     */
    public void onShowCustomView(View view, CustomViewCallback callback) {};

        该方法传入一个ViewCustomViewCallback回调,其中view就是包含全屏播放视频WV.voFrameLayoutcallback则需要在退出全屏播放时调用。这两个我们都需要保存到变量中:

    val chromeClient = object : WebChromeClient() {
        private var customView: View? = null
        private var customViewCallback: CustomViewCallback? = null
        ...
    }

        接下来完善一些进入全屏播放的逻辑:

    override fun onShowCustomView(view: View?, callback: CustomViewCallback?) {
        //自定义view不空,说明已经进入全屏,这时候再点击就推出全屏播放
        if (customView != null) {
            onHideCustomView()
            return
        }
        
        //保存这两个变量
        customView = view
        customViewCallback = callback
        
        //将全屏播放视频的view添加到我们当前的根布局中,注意必须用MATCH_PARENT
        val layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
        (binding.root as ViewGroup).addView(customView, 0, layoutParams) //必要时添加到第一个位置
       
        //切换横屏,体验更好
        requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE
    }


        其次WebView退出全屏视频播放会回调onHideCustomView()方法:

    /**
     * Notify the host application that the current page has exited full screen mode. The host
     * application must hide the custom View (the View which was previously passed to {@link
     * #onShowCustomView(View, CustomViewCallback) onShowCustomView()}). After this call, web
     * content will render in the original WebView again.
     *
     * <p class="note"><b>Note:</b> if overriding this method, the application must also override
     * {@link #onShowCustomView(View, CustomViewCallback) onShowCustomView()}.
     */
    public void onHideCustomView() {}

        在该回调方法中需要移除全屏播放的View,并且释放之前保存的变量:

    override fun onHideCustomView() {
        //从根布局中移除全屏播放的view
        (binding.root as ViewGroup).removeView(customView)
        //还记得前面保存的customViewCallback,这时候需要回调通知WebView已经推出全屏了
        customViewCallback?.onCustomViewHidden() 
      
        //移除保存的变量
        customView = null
        customViewCallback = null
         
        //根据业务需要重新恢复屏幕方向
        requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED
    }


        为了更好的用户体验,全屏播放一般都是横屏,所以在两个回调方法中我们都调用了setRequestedOrientation( int requestedOrientation)方法,该方法会导致配置变化,因此还需要在manifest.xml中给当前Activity加上configChanges

    <activity
	android:name=".view.ui.webview.FullVideoWebViewActivity"
	android:configChanges="orientation|screenSize|screenLayout"
	android:exported="true">

        并且重写Activity中的onConfigurationChanged(newConfig: Configuration)方法:

    override fun onConfigurationChanged(newConfig: Configuration) {
        super.onConfigurationChanged(newConfig)
    }


        基本上用不到的知识储备又增加了。


不忘初心的阿甘
最新回复 (0)
    • 安卓笔记本
      2
        登录 注册 QQ
返回
仅供学习交流,切勿用于商业用途。如有错误欢迎指出:fluent0418@gmail.com