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);  //和自适应一起用的,加载完全缩小的Viewsetting.setDomStorageEnabled(true); //缓存setting.setMixedContentMode(WebSettings.LOAD_NORMAL);//加载混合
//重中之重,新建并设置一个WebChromClient
webChromeClient = new VideoEnabledWebChromeClient(this,nonVideoLayout, videoLayout, null, dWebView) {};webChromeClient.setOnToggledFullscreen(new VideoEnabledWebChromeClient.ToggledFullscreenCallback(){@Overridepublic 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 allgetWindow().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 allgetWindow().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 = activitythis.webView = webViewisVideoFullscreen = false}//我们需要看到这个方法,在H5调用视频全屏的时候,会调用的类
//view,则为我们需要展示的视频view(基本上是一个Framlayout)
override fun onShowCustomView(view: View, callback: IX5WebChromeClient.CustomViewCallback) {if (view is FrameLayout) {isVideoFullscreen = truevideoDialog = Dialog(mActivity, R.style.Theme_Black_NoTitleBar_Fullscreen)videoDialog?.setContentView(view)videoDialog?.show()// Notify full-screen changeif (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给用上~

Android H5视频全屏,自适应视频相关推荐

android 启动视频,android 启动页面全屏播放视频
有时候大家在启动软件的时候,会看到有一个比较炫酷的短视频,觉得很有意思,现在做项目的时候也遇到了,跟大家分享一下. 首先,在 res 目录下建一个文件夹 raw, 把你的视频文件(.mp4等)放进去. ...
android SurfaceView + Camera全屏自适应屏幕尺寸
包含三个尺寸:手机显示屏尺寸,SurfaceView尺寸,Camera.Size尺寸. 其中:SurfaceView尺寸是可以调整的,手机显示屏尺寸和Camera.Size尺寸无法调整,所以只能根据手 ...
h5 宽度全屏自适应
<style>html{font-size:calc(100vw/640*100); }.main{position: absolute;top: 0;left: 0;width: 6.4 ...
记一次微信H5全屏播放视频的总结
一.H5场景介绍需求:在微信里打开一个H5页面,然后点击按钮全屏播放视频,等视频播放完成后,在视频上显示一个跳转按钮,点击按钮跳转到其他的页面. 二.遇到的问题 1.IOS设备微信上,视频不能预加载 ...
android 4.0以上WebView不能全屏播放视频的解决办法
上次鄙人做了一个简单的利用webView实现的一个浏览器!其中遇到了两个问题,一个是将浏览器中需要下载的内容托管到系统默认的下载程序进行下载,这个比较简单就不在这里讨论了:另一个问题就是我们的Andr ...
手机移动端视频全屏播放（兼容Android与iOS）
在做移动端项目时,做个视频播放是不可避免的,大部分情况下都是点击一个按钮,视频全屏播放,下面将对这个情况进行分析与记录. html: <video height="100%" ...
Android全屏播放视频~包括刘海屏、隐藏时间状态栏
需求是全屏播放视频,刘海屏上面也要播放. 下面是我实现的方式: 首先创建 CustomVideoView 工具类: import android.annotation.TargetApi; impor ...
【多媒体开发】Android视频全屏录制遇到的一些问题
最近写了个demo,有个功能是全屏录制视频,录视频的基本功能不算难,demo通过SurfaceView + MediaRecorder的方法, 这里不上代码了,只总结下一些问题: 1.Paramete ...
微信内置浏览器非全屏播放视频解析
前提条件,接了一个项目要实现在微信公众号里课程播放,而且还有评论功能,视频需要小窗播放. 首先公布解决方案: 感谢知乎上的回答,原版微信内置浏览器如何小窗不全屏播放视频? 感谢该问题的徐霖同学的回答 ...
微信视频播放器隐藏播放控件，视频全屏做法分享
转自:https://www.haorooms.com/post/weixin_hidevideo_control 本人实测有效.为了防止以后还要用到,到时候找不到,所以转载一下. 前言平时项目中视 ...

Android H5视频全屏,自适应视频