H5视频全屏
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>
好了，我们看看横屏视频的效果.上下黑边贼拉多,
这才是我们理想的效果
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yJXFrjeW-1666858839352)(H5%E8%A7%86%E9%A2%91%E5%85%A8%E5%B1%8F%201397b41bcd2543118444fa1721209f4b/Untitled%201.png)]](https://img-blog.csdnimg.cn/2337c97754614e46a95cfb6d366663d4.png)
竖屏视频的效果:十分完美
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给用上~
