H5视频全屏

记录WebView播放视频的方式和坑点

0.视频全屏

效果:

1.若为竖屏视频,则点开全屏后,为正常的竖屏全屏播放.

2.若为横屏视频,则点开全屏后,为横屏的视频播放.

3.你不懂这个东西折磨了我多久,网上的资料真的是又老又旧,且stackflow上也没有好的解决方案.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gAhoCS9i-1666858839351)(H5%E8%A7%86%E9%A2%91%E5%85%A8%E5%B1%8F%201397b41bcd2543118444fa1721209f4b/Untitled.png)]

1.需求

需要再WebView中正常的播放视频(大部分自己可食用的网站),且需要全屏的播放视频.

2.问题

如果你不做任何处理,你可以发现会出现这种情况.

在点击视频全屏的时候.页面会僵住,没有出现全屏,也不会播放视频

这是你没做任何支持,且没有将View放到我们的容器中去..

3.解决基本视频全屏问题

First:本文章使用的为JsBridge的X5版本进行操作

可以看到我们需要设置一个自定义的WebChromClient.

我们先暂时将横竖屏操作暂时不操作.但是需要记住这里有这么一个操作

//Activity.java
//简易的初始化.
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_wrok_with_flyio_test);
    Log.e("TAG", "onCreate: 我十分怀疑这里做了什么东西" );
    DWebView dWebView= (DWebView) findViewById(R.id.webview);
    WebSettings setting = dWebView.getSettings();
    setting.setUseWideViewPort(true);   //自适应
    setting.setLoadWithOverviewMode(true);  //和自适应一起用的,加载完全缩小的View
    setting.setDomStorageEnabled(true); //缓存
    setting.setMixedContentMode(WebSettings.LOAD_NORMAL);//加载混合
//重中之重,新建并设置一个WebChromClient
webChromeClient = new VideoEnabledWebChromeClient(this,nonVideoLayout, videoLayout, null, dWebView) 
        {
        
        };

webChromeClient.setOnToggledFullscreen(new VideoEnabledWebChromeClient.ToggledFullscreenCallback()
        {
            @Override
            public void toggledFullscreen(boolean fullscreen)
            {
                Log.e("TAG", "toggledFullscreen: asfgasfgafg全屏"+fullscreen);
                // Your code to handle the full-screen change, for example showing and hiding the title bar. Example:
                if (fullscreen)
                {
//                    setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR);
                    WindowManager.LayoutParams attrs = getWindow().getAttributes();
                    attrs.flags |= WindowManager.LayoutParams.FLAG_FULLSCREEN;
                    attrs.flags |= WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON;
                    getWindow().setAttributes(attrs);
                    if (android.os.Build.VERSION.SDK_INT >= 14)
                    {
                        //noinspection all
                        getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LOW_PROFILE);
										//横屏操作
                     //setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

                    }
                }
                else
                {
                    WindowManager.LayoutParams attrs = getWindow().getAttributes();
                    attrs.flags &= ~WindowManager.LayoutParams.FLAG_FULLSCREEN;
                    attrs.flags &= ~WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON;
                    getWindow().setAttributes(attrs);
                    if (android.os.Build.VERSION.SDK_INT >= 14)
                    {
                        //noinspection all
                        getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE);
										//竖屏操作
                    //setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

                    }
                }

            }
        });

dWebView.setWebChromeClient(webChromeClient);
}

好,我们看我们自定义的类

open class VideoEnabledWebChromeClient : WebChromeClient{
private var videoDialog: Dialog? = null
interface ToggledFullscreenCallback {
        fun toggledFullscreen(fullscreen: Boolean)
    }

//构造函数,传入必要的参数
constructor(
        activity: Activity,
        activityNonVideoView: View?,
        activityVideoView: ViewGroup?,
        loadingView: View?,
        webView: DWebView?
    ) {
        mActivity = activity
        this.webView = webView
        isVideoFullscreen = false
    }

//我们需要看到这个方法,在H5调用视频全屏的时候,会调用的类
//view,则为我们需要展示的视频view(基本上是一个Framlayout)
override fun onShowCustomView(view: View, callback: IX5WebChromeClient.CustomViewCallback) {
			if (view is FrameLayout) {
						isVideoFullscreen = true
						videoDialog = Dialog(mActivity, R.style.Theme_Black_NoTitleBar_Fullscreen)
            videoDialog?.setContentView(view)
            videoDialog?.show()
					// Notify full-screen change
            if (toggledFullscreenCallback != null) {
                toggledFullscreenCallback!!.toggledFullscreen(true)

            }			
}
}
//和onShowCustomView配合的一个方法.H5退出全屏会调用的类
override fun onHideCustomView() {
if (isVideoFullscreen) {
if (toggledFullscreenCallback != null) {
                toggledFullscreenCallback!!.toggledFullscreen(false)
                videoDialog?.let {
                    it.dismiss()
                }
            }
}
}

}

其实这样,我们基本的操作已经做完了.

你让我解释,就是H5投射过来的View展示在我们的自己的Dialog上,还有一些文章使用另外的容器，都一样.大同小异罢了.

然后我们再加上AndroidManifest.xml的配置,否则在configuration变化后会导致OnCreate重新加载。那之前的就白做了.

<activity android:name=".WrokWithFlyioTestActivity"
    android:configChanges="orientation|keyboardHidden|screenSize|locale"
    android:windowSoftInputMode="adjustResize|stateAlwaysHidden|adjustPan"
    android:hardwareAccelerated="true"
    android:screenOrientation="portrait"
    ></activity>

好了，我们看看横屏视频的效果.上下黑边贼拉多,

这才是我们理想的效果

竖屏视频的效果:十分完美

4.解决思路以及方法

还记得我上面说的横竖屏的方法吗?如果此时你把横竖屏打开，你会发现把竖屏视频进行全屏的效果十分的烂.会出现一些莫名的bug.

那我就在想，我是否可以获取到该视频的宽高.判断为宽屏视频才去进行横屏操作,否则不操作.

那如何才能获取H5视频内的宽高呢?

我直接执行Js代码,获取到该标签的宽高返回,最后再去执行该是否横屏.

fun TestTheFunciton(){
        var js = "javascript:"
js += "function getTheVideoRec(){"
        js +="console.log(123); ";
        js +="var width = 0;";
        js +="var height = 0;";
        js += "var _ytrp_html5_video = document.getElementsByTagName('video')[0];"
        js +="if (_ytrp_html5_video !=null ) {" ;
        js += "var video = _ytrp_html5_video;";
        js +="width = video.videoWidth;";
        js +="height = video.videoHeight;";
        js+="}";
        js += "var info={'width':width,'height':height};"
        js += "return info"
             js+="}";
        js+="getTheVideoRec()";
        webView?.evaluateJavascript(js,{
            Log.e("TAG", "TestTheFunciton: $it", )
        })
}

好了，后面的业务代码就不需要我继续操作了. 不过这里还是有一定的问题，这是保证了拿到的第一个video标签组件. 如果要做更加精准的事情，就去找H5的同学帮你写一段js代码把~~~

最后,其实整个方法不难，但是比较奇特的是思路0 0。 没想到把，写Android的还用把Js给用上~