Android使用webview来显示和控制网页上的信息。
然而在使用自己开发的浏览器中打开网页视频时,会出现部分网站的视频全屏存在问题。
问题:部分视频网站(如腾讯视频、搜狐视频、优酷等)全频时只是放大了控件,或者无法做到真正的全屏。
需求:希望所有网站点击全屏后,可以实现全屏播放,并且手机屏幕自动横屏。
分析:个人实践看来,只有爱奇艺和芒果TV(有发现其他的欢迎补充)使用的是H5自带的全屏功能,视屏点击全屏后效果体验很好;而其他网站只是对网页播放视频的控件进行了宽高的调整,其实是伪全屏。H5自带的全屏会调用webchromeclient类中的onShowCustomView()方法,我们可以在这个方法里对我们需要实现的全屏效果做处理;而其他伪全屏的视频网站并没有对移动端的手机做出很好的支持,点击全屏按钮时没有回调onShowCustomView()方法。
思路:对于可以回调onShowCustomView()方法的,自行处理,这里我就不多赘述了;
对于不能回调onShowCustomView()方法的,通过js注入,并在客户端对js注入的方法绑定,one by one处理全屏问题。
下面贴出代码分析:
JS注入部分:
在网页完成加载时,会回调onPageFinish()方法,在这里可以注入自己需要的js方法。
@Override
public void onPageFinished(WebView view, String url) {
view.loadUrl(BrowserJsInject.fullScreenByJs(url));
}
这里的BrowserJsInject是我自己写的一个对于JS注入的公共类,里面内容如下:
public class BrowserJsInject {
/**
* Js注入
* @param url 加载的网页地址
* @return 注入的js内容,若不是需要适配的网址则返回空javascript
*/
public static String fullScreenByJs(String url){
String refer = referParser(url);
if (null != refer) {
return "javascript:document.getElementsByClassName('" + referParser(url) + "')[0].addEventListener('click',function(){local_obj.playing();return false;});";
}else {
return "javascript:";
}
}
/**
* 对不同的视频网站分析相应的全屏控件
* @param url 加载的网页地址
* @return 相应网站全屏按钮的class标识
*/
public static String referParser(String url){
if (url.contains("letv")) {
return "hv_ico_screen"; //乐视Tv
}else if (url.contains("youku")) {
return "x-zoomin"; //优酷
}else if (url.contains("bilibili")) {
return "icon-widescreen"; //bilibili
}else if (url.contains("qq")) {
return "tvp_fullscreen_button"; //腾讯视频
}
return null;
}
}
fullScreen(String url)方法将传入的加载的url,通过referParser(String url)方法分析网站类型。referParser中的返回值都是我个人对于不同网站JS调试后找到的,有问题欢迎指出。然后根据不同的网站注入不同的js,实现对全屏按钮的监听操作。其中js字符串中local_obj为客户端绑定的相关类,用于处理js操作。
至此,JS注入部分结束。
Android客户端处理JS绑定:
当JS注入完成后,网页就已经运行了这个脚本,对相应的全屏按钮实现了监听。
在设置webview的相关属性操作时,可以对设置相应的JS操作:
mMainView.addJavascriptInterface(new Object(){
@JavascriptInterface
public void playing(){
Log.i("video", "=======================");
fullScreen(true);
}
}, "local_obj");
然后,在点击全屏按钮时就会触发fullScreen()方法,这个方法中处理你所需要实现的相关全屏操作。
比如,全屏并手机横屏:
public void fullScreen(){
if (mActivity.getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) {
mCustomScreenLinearLayout.scrollTo(0, 0);
mActivity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
mUrlBarAutoShowManager.flag = false;
mFixedTitlebarContainer.setVisibility(View.GONE);
showFixTitle(false);
mBottomNavigation.hideBottomNav();
mBottomFrameLayout.setVisibility(View.GONE);
}else {
mActivity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
mUrlBarAutoShowManager.flag = true;
mFixedTitlebarContainer.setVisibility(View.VISIBLE);
hideFixTitle(false);
mBottomNavigation.showBottomNav();
mBottomFrameLayout.setVisibility(View.VISIBLE);
}
}
遇到的问题:
有时候整个工程的代码逻辑可能会导致操作的空间不一样,致使例如fullScreen方法中的相关UI等操作无效或异常。这时可通过发送一个简单的广播,在需要进行UI更新的地方接受并操作。
浏览器源码中的Tab类中可做JS注入和发送广播的代码实现,至于UI更新的相关操作,则需要在BaseUi类中实现,原因自己可以去研究浏览器代码的相关实现逻辑。
本人菜鸟,欢迎大神指正。