android webview全屏视频,Android开发之在Webview中全屏播放视频

【版权申明】非商业目的可自由转载

博文地址：https://blog.csdn.net/ShuSheng0007/article/details/99702252

出自：shusheng007

概述

出于对成本或者其他原因的考虑，在移动开发中有时会采用混合开发的方式,其中一种方式就是让Web页面跑在原生的WebView里面。本文我们来谈论一下如何在webview中全屏播放视频。

实现方法

本文只谈论如何支持使用 HTML 的标签播放视频时的全屏问题。在这个方面，IOS开发的简单性又一次碾压Android,IOS不需要写任何代码，内置的WebView 就可以很好的支持标签的全屏播放，但是Android却不行。Android 需要重写WebChromeClient 里的onShowCustomView(View view, CustomViewCallback callback)与onHideCustomView()这两个方法。

onShowCustomView(): 通知宿主程序，当前页面已经进入全屏模式了。

onHideCustomView() : 通知宿主程序，当前页面已经退出全屏模式。

方案实施

准备标签

Your browser does not support HTML5 video.

配置宿主Activity

package="top.ss007.webviewtube">

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">

android:name=".playvideo.VideoPlayerAct"

android:configChanges="orientation|screenSize|keyboardHidden"

android:hardwareAccelerated="true"

android:theme="@style/Theme.AppCompat.NoActionBar" />

...

注意设置开启硬件加速。

配置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啊。

总结

用心传播知识，只为后辈生活更美好(少加班，多陪家人，或者有更多的时间去做其他有意义的事情)。

本文同步分享在 博客“ShuSheng007”(CSDN)。

如有侵权，请联系 support@oschina.cn 删除。

本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。