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

【版权申明】非商业目的可自由转载
博文地址：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啊。

概述

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

GitHub源码地址