解决WebView中无法全屏播放视频的问题(涉及H5,iframe)

/ 0评 / 0

在我开发的一款Android RSS阅读器「知微」中,使用WebView播放<video>标签(H5视频),<iframe>标签中的视频时,一直无法正常使用全屏功能。今天终于解决了,其中心酸不表,此文仅记录解决方法。

一、WebView网页中,<video>标签的视频无法正常全屏

一般来说,如果在WebView中播放<video>标签的视频(即H5视频),点击“全屏”时会调用WebChromeClient的onShowCustomView方法,将要播放的视频videoView传递过去,然后把它加入到屏幕上新建的横屏控件(或者说容器)videoContainerView中即可。

可在我的主力机MX5(Flyme 5.1.11.1A,Android 5.1)上,点击视频上的“全屏”按钮后,是直接将WebView的内容横过来了,且其中的视频部分也无法正常播放画面,只有声音,而要展示的videoView处在WebView的下一层,可以播放画面。

可在我借来的测试机VIVO(Funtouch 3.0 Android 6.0.1)上却没有这个问题……

我当时的代码基本如下:

public void onShowCustomView(View videoView, WebChromeClient.CustomViewCallback callback) {
    // 将Activity横屏
    mActivity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
    /* 保存系统方向的状态,这里省略 */
    mWebView.setVisibility(View.GONE);
    // videoContainerView 是视频View的一个上层控件(容器)。
    ViewGroup videoContainerView = new FrameLayout(mActivity);
    videoContainerView .setBackgroundColor(Color.BLACK);
    mActivity.getWindow().getDecorView().addView(videoContainerView );
    videoContainerView .addView(videoView,WindowManager.LayoutParams.MATCH_PARENT,WindowManager.LayoutParams.MATCH_PARENT);
    videoContainerView .setVisibility(View.VISIBLE);
}

在使用多款浏览器后发现,这是MX5手机(Flyme 5.1.11.1A,Android 5.1)系统Webview的问题,其他内置了Chromium引擎的浏览器都表现均正常。
那是不是这个问题就无解呢?答案当然不是。

因为测试过程中,我发现Webview打开优酷网站的视频时,全屏功能可以正常使用。

所以最后我找到了一款移动端使用的video.js库,只要在要加载网页中正确引入,就可以使用全屏功能。

这个库的使用方式可见此文:video.js--很赞的H5视频播放库

当然还有其他2种方式可以解决:

1,弃用原生WebView,改用Chromium引擎,但缺点是会导致安装包太大。

2,弃用原生WebView,腾讯X5WebView内核。据说性能与WebView相当,主要是对播放H5视频支持良好。

最早我准备采用方案2的,但又遇到64手机无法开启X5内核的问题,虽然按文档的指示对代码做了调整,可还是没能成功。

二、WebView网页中,<iframe>标签的视频无法全屏

国内大部分视频网站(如腾讯视频、搜狐视频、优酷等),分享出来的外链都不是用<video>标签播放的H5视频,而是下面这种<iframe>标签的形式:

<iframe src="//player.bilibili.com/player.html?aid=24139962&cid=40453393&rel=0&autoplay=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

在我自制的BiliBili的RSS订阅源中,正文放的就是这个格式的视频。

对于这类视频,我是单独用一个WebView打开上面src中的链接,使得整个界面上除了状态栏只有这个视频。然后对这个WebView采用JS注入的方式,使得点击“全屏”按钮时,调用Java代码——将界面横屏展示,这样由于界面上只有这个视频,一横屏自然就全屏了。

解决方法可见该文:Android webview网页视频无法全屏解决(onShowCustomView不调用)

发表评论

电子邮件地址不会被公开。 必填项已用*标注