【版权申明】非商业目的可自由转载
博文地址:https://blog.csdn.net/ShuSheng0007/article/details/99702252
出自:shusheng007
系列文章
Android开发之Webview中原生与JS交互
Android开发之从Webview中选择本机文件
概述
出于对成本或者其他原因的考虑,在移动开发中有时会采用混合开发的方式,其中一种方式就是让Web页面跑在原生的WebView
里面。本文我们来谈论一下如何在webview
中全屏播放视频。
实现方法
本文只谈论如何支持使用 HTML 的<video>
标签播放视频时的全屏问题。在这个方面,IOS
开发的简单性又一次碾压Android
,IOS
不需要写任何代码,内置的WebView
就可以很好的支持<video>
标签的全屏播放,但是Android
却不行。Android 需要重写WebChromeClient
里的onShowCustomView(View view, CustomViewCallback callback)
与onHideCustomView()
这两个方法。
onShowCustomView()
: 通知宿主程序,当前页面已经进入全屏模式了。
onHideCustomView()
: 通知宿主程序,当前页面已经退出全屏模式。
方案实施
准备<video>
标签
<video id="banner-video" controls="controls" style="width: 100%;height: auto;">
<source src="要播放视频的URL" , type="video/mp4">
Your browser does not support HTML5 video.
</video>
配置宿主Activity
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="top.ss007.webviewtube">
<uses-permission android:name="android.permission.INTERNET" />
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:networkSecurityConfig="@xml/network_security_config"
android:theme="@style/AppTheme">
<activity
android:name=".playvideo.VideoPlayerAct"
android:configChanges="orientation|screenSize|keyboardHidden"
android:hardwareAccelerated="true"
android:theme="@style/Theme.AppCompat.NoActionBar" />
...
</application>
</manifest>
注意设置开启硬件加速。
配置WebView
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptCanOpenWindowsAutomatically(true);
settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
settings.setAllowFileAccess(true);
settings.setDomStorageEnabled(true);
settings.setUseWideViewPort(true); // 关键点
mWebView.setWebViewClient(myWebViewClient);
mWebView.setWebChromeClient(new InsideWebChromeClient());
重写WebChromeClient
private class InsideWebChromeClient extends WebChromeClient {
private View mCustomView;
private CustomViewCallback mCustomViewCallback;
@Override
public void onShowCustomView(View view, CustomViewCallback callback) {
super.onShowCustomView(view, callback);
if (mCustomView != null) {
callback.onCustomViewHidden();
return;
}
mCustomView = view;
mFrameLayout.addView(mCustomView);
mCustomViewCallback = callback;
mWebView.setVisibility(View.GONE);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
}
@Override
public void onHideCustomView() {
mWebView.setVisibility(View.VISIBLE);
if (mCustomView == null) {
return;
}
mCustomView.setVisibility(View.GONE);
mFrameLayout.removeView(mCustomView);
mCustomViewCallback.onCustomViewHidden();
mCustomView = null;
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
super.onHideCustomView();
}
}
经过以上3步基本上就可以实现全屏播放了。
此处再多讲一点,有时产品经理会要求我们实现自动全屏播放,你可以直接告诉他自动播放没有问题,但是自动全屏在Android上是不能实现的。因为Web设计者出于安全考虑是禁止这样做的,你可以想象一下,如果一个恶意程序在你点击了播放视频后直接全屏播放,霸占了你的整个屏幕,又不给你退出全屏的功能,逼迫你看完整个视频…
不过在实际开发过程中,对于某些机型通过不正当的,将来有可能被废弃的方式是可以做到的。通过使用WebView
过时的API
loadUrl
,执行v.requestFullscreen();
js 代码,如下所示
String js="javascript: var v=document.getElementById('banner-video'); v.requestFullscreen(); v.play();";
mWebView.loadUrl(js);
由于行文需要,文中省略了很多细节,容易使人发生困扰, 强烈建议通过文章末尾提供GitHub地址查看源码,记得给个Star啊。
概述
用心传播知识,只为后辈生活更美好(少加班,多陪家人,或者有更多的时间去做其他有意义的事情)。