Android编程使WebView支持HTML5 Video全屏播放的解决方法
转载 &更新时间：日 12:26:15 & 作者：勇往直前的胖子
这篇文章主要介绍了Android编程使WebView支持HTML5 Video全屏播放的解决方法,较为详细的分析了全屏播放所涉及的相关技巧,并给出了完整代码下载地址供读者参考,需要的朋友可以参考下
本文实例讲述了Android编程使WebView支持HTML5 Video全屏播放的解决方法。分享给大家供大家参考，具体如下：
1）需要在AndroidManifest.xml文件中声明需要使用HardwareAccelerate, 可以细化到Activity级别，如果不需要的View可以声明不要用加速，但是需要在代码中做，具体如下：
a. 如果要声明整个应用都要加速：
代码如下:&application ... android:hardwareAccelerated ="true"&
b. 如果要在Activity中声明，则：
代码如下:&activity ... android:hardwareAccelerated="true" &还可以更细化到Window, getWindow.setFlags(
&&&&&&&& WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,
WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);
c. 如果application或者activity都申明了要硬件加速，但是为了某些原因(比如省电？)，一些View不需要硬件加速的话，
代码如下:view.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
2）可以说挺奇怪的是，需要在AndroidManifest.xml文件中用上&use-sdk&&/use-sdk&标签，而且如果是空的还不行，必须写上targetSDK或者minSDK，但是我试验过，不管写版本是多少都没有关系。。。理论上说，Android应该是从3.0（ API Level 11）开始可以对2D渲染加速，但是我把targetSDK设置为5都可以使用的，但是这个标签不写还不行。
一般来说，上面的操作做了，就可以使用video标签播放视屏了，如果要支持全屏，还需要做一点操作：
1）给webview一个WebChromeClient对象，这个WebChromeClient对象需要实现onShowCustomView和onHideCustomView方法，下面是一个实现例子：
public void onShowCustomView(View view, CustomViewCallback callback) {
if (myCallback != null) {
myCallback.onCustomViewHidden();
myCallback =
long id = Thread.currentThread().getId();
WrtLog. v("WidgetChromeClient", "rong debug in showCustomView Ex: " + id);
ViewGroup parent = (ViewGroup) mWebView.getParent();
String s = parent.getClass().getName();
WrtLog. v("WidgetChromeClient", "rong debug Ex: " + s);
parent.removeView( mWebView);
parent.addView(view);
myCallback =
chromeClient =
private View myView =
private CustomViewCallback myCallback =
public void onHideCustomView() {
long id = Thread.currentThread().getId();
WrtLog. v("WidgetChromeClient", "rong debug in hideCustom Ex: " + id);
if (myView != null) {
if (myCallback != null) {
myCallback.onCustomViewHidden();
myCallback =
ViewGroup parent = (ViewGroup) myView.getParent();
parent.removeView( myView);
parent.addView( mWebView);
好吧，这个写法和网上很多写法不一样,网上大部分的例子都是onShowCustomView方法接收到的view是一个VideoView对象，而这里是一个找不到的HTML5VideoFullScreen的VideoSurfaceView子类，而且这个子类还是一个private的子类，在外面根本没有办法访问到，android.jar中也没有HTML5VideoFullScreen这个类。如果想要在application中访问到这个类，那么需要把&android-SDK-path&/platforms/&android-version&/data/layoutlib.jar这个包加到buildpath中，而且从android-14，也就是android4.0以后才这样，也就是说，网上说的那个方法在android3.0时代是可以用的，android4.0以后就不行了，我用的是android4.0.3。
其实不管是什么版本，这个段代码的大概意思就是，在onShowCustomView方法中，将获取到的view放到当前Activity的最上方，在onHideCustomView中，将之前的view隐藏或者删除，将原来被覆盖的webview放回来，并结束播放，否在会报MediaPlayer IllegalStatusException, 而且还是Native method,根本没法调试了。
上面代码是片段，很多朋友看了也不能解决问题，完整实例代码代码点击此处。
可以下载下来，用eclipse导入工程，把样例视频放到sdcard根部目录下，从系统角度看就是/mnt/sdcard即可。
效果如图：
希望本文所述对大家Android程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具15:30 提问
android webview加载HTML5网站，监听HTML5视频播放？
如题：在android盒子上面自己做了一个apk，布局是一个webview和一个SurfaceView，
webview加载一个HTML网站网站代码为：
&!DOCTYPE HTML&
your browser does not support the video tag
里面播放的是一个avi格式的视频，视频可以播放。
我现在因为要修改视频输出的声道设置，本人有SDK源码，源码的Mediaplayer有设置声道的接口，所以只要得到Mediaplayer就可以设置声道，现在在webview中无法得到Mediaplayer，我新new Mediaplayer，但是播放的视频不会经过Mediaplayer，哪位大神对webview播放视频熟悉的，教教小弟如何得到这个视频的Mediaplayer呢？
按赞数排序
你在webview里面应该拿不到这个mediaplayer。
如果拿不到，那用jni去调c里面的方法行不行？
用jni去调，我看了底层的c文件，里面没有申明jni，这样就不能用编译出来的库文件了，新手求指教
----------------------同志你好，我是CSDN问答机器人小N，奉组织之命为你提供参考答案，编程尚未成功，同志仍需努力！
准确详细的回答，更有利于被提问者采纳，从而获得C币。复制、灌水、广告等回答会被删除，是时候展现真正的技术了！
其他相关推荐You jump, I jump.
WebView点击视频全屏按钮界面消失
WebChromeClient中重写了onShowCustomView和onHideCustomView方法，就算方法内部不加任何操作，也会出现这情况。
暂时解决办法：不重写这两个方法，就不会出现界面消失问题。
希望有更好的方法，或者知道原因的告诉下。
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！半路出身的安卓开发人
WebView实现全屏播放的一种方法
　　用过WebView的开发者们肯定都知道这里面的坑数不胜数，加载缓慢，内存泄露，文件选择……没错，全屏播放视频，这又是一个大坑。一个没有修饰过的原生WebView几乎不可能在某一个主流视频网站实现全屏播放，倘若在客户端自己实现简单的播放器，链接拿过来，摆个VideoView，想怎么全屏怎么全屏，放在WebView上，一切就悲剧了，大多数情况下点击全屏按钮是没有反应的，或者无法实现横屏全屏。今天来介绍一种简单易行粗暴的方式来实现WebView的视频全屏播放。
　　当你无从下手的时候，照例先看一下，很多常见的问题官方文档都给我们提供思路。你会发现下面这样一段话，
　　应用如果需要支持HTML5的video标签，必须打开硬件加速。我们只需要在Application标签或者相应Activity标签下添加android:hardwareAccelerated="true"即可。接着为了支持全屏，需要重写WebChromeClient的onShowCustomView()和onHideCustomView()方法，这两个方法缺一不可。先来看一下onShowCustomView（）:
　　当前页面进入全屏模式的时候会调用这个方法，并且返回了两个参数。第一个是我们要在全屏模式时显示的View，第二个是一个CustomViewCallBack接口，可以调用这个接口请求关闭全屏模式。再看一下onHideCustomView()方法：
　　通知应用当前页面已经关闭全屏模式，我们需要做的操作是隐藏之前onSHowCustomView()方法中取到的View。了解这两个方法之后，我们就可以进行一些操作来实现简单的全屏播放了。布局文件中我们增加一个和WebView同层级的Framelayout，如下所示：
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"/&
&FrameLayout
android:id="@+id/videoContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"/&
　　在Activity中实现自定义的WebChromeClient，在onShowCustomView中横屏，隐藏WebView,并将得到的View添加到FrameLayout中显示。在onHideCustomView中隐藏View，显示WebView，并竖屏，代码如下：
` private class CustomWebViewChromeClient extends WebChromeClient{
public void onShowCustomView(View view, CustomViewCallback callback) {
fullScreen();
mWebView.setVisibility(View.GONE);
mVideoContainer.setVisibility(View.VISIBLE);
mVideoContainer.addView(view);
mCallBack=
super.onShowCustomView(view, callback);
public void onHideCustomView() {
fullScreen();
if (mCallBack!=null){
mCallBack.onCustomViewHidden();
mWebView.setVisibility(View.VISIBLE);
mVideoContainer.removeAllViews();
mVideoContainer.setVisibility(View.GONE);
super.onHideCustomView();
private void fullScreen() {
if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) {
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
　　最后别忘记处理屏幕旋转，否则横竖屏切换会重新走一遍生命周期。通过在一些主流视频网站上的测试，在爱奇艺，土豆，芒果TV，PPTV等可正常全屏，在腾讯，乐视，BiliBili,Acfun等网站仍然无法全屏。通过日志我们可以发现，根本没有回调onShowCustomView这个方法，所以没有执行相应代码。原因暂时还不得而知，有小伙伴了解的可以沟通一下。那么如何得到用户点击全屏按钮的事件呢，既然是一个html页面，java语言可以操作的东西就不多了，JavaScript就可以大显身手了。通过向页面注入一些js语句我们可以做很多事情，只需要知道全屏按钮的Class标识，就可以通过js，当用户点击全屏按钮的时候调用我们本地方法，具体代码如下：
"javascript:document.getElementsByClassName('" + tag + "')[0].addEventListener('click',function(){onClick.fullscreen();});"
　　tag是Class标识，onClick.fullscreen()是我自己本地定义的方法。那么如何注入这段js代码呢？我们只需要重写WebClient的onPageFinished()方法，如下所示：
private class CustomWebClient extends WebViewClient{
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
String js=TagUtils.getJs(url);
view.loadUrl(js);
private class JsObject{
@JavascriptInterface
public void fullscreen(){
//监听到用户点击全屏按钮
fullScreen();
mWebView.addJavascriptInterface(new JsObject(),"onClick");
　　这样就可以实现上述几个网站的全屏播放了。
经测试，腾讯和BiliBili没有问题了，乐视和Acfun仍然不可以全屏，即使已经找到了全屏按钮的Class标识。哪位大仙可以提供一个解释。
下面给出一些我收集的几个视频网站的全屏按钮Class标识：
public static String getTagByUrl(String url) {
if (url.contains("qq")) {
return "tvp_fullscreen_button"; // http://m.v.qq.com
} else if (url.contains("youku")) {
return "x-zoomin";
// http://www.youku.com
} else if (url.contains("bilibili")) {
return "icon-widescreen";
// http://www.bilibili.com/mobile/index.html
} else if (url.contains("acfun")) {
return "controller-btn-fullscreen"; //http://m.acfun.tv
} else if (url.contains("le")) {
return "hv_ico_screen";
// http://m.le.com
return "";
　　总结一下，正如文章题目所说，实现WebView全屏播放的一种方式，而且肯定不是主流的一种方式，仅仅只是一种比较简单的方式。通过反编译一些浏览器应用的apk，大多数是通过js获取到当前页面视频的链接，用自定义的播放器来播放，这样使得播放界面可以自定义，用户体验更好，当然，我也想过这种方法，可是已经跪在起点，如何获得当前页面视频的播放地址。研究过的同学可以和我交流交流，不胜感激。
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！Android WebView 通过Html5播放优酷视频，点击全屏按钮时如何全屏? - 知乎有问题，上知乎。知乎作为中文互联网最大的知识分享平台，以「知识连接一切」为愿景，致力于构建一个人人都可以便捷接入的知识分享网络，让人们便捷地与世界分享知识、经验和见解，发现更大的世界。10被浏览<strong class="NumberBoard-itemValue" title="分享邀请回答public void onShowCustomView(View view, CustomViewCallback callback)
public void onHideCustomView()
点击全屏 WebView 会把视频相关的内容封装为一个 View.你需要手动加入到 Window 或者对应的 View 上面就可以,在Hide 中移除掉 View 就可以了差不多这个样子目前网页中播放器的状态没有找到好办法同步,比如,现在是已经全屏,返回键退出的时候播放器状态没有改变0添加评论分享收藏感谢收起0添加评论分享收藏感谢收起写回答