Question

我正在开发一个在webview上播放html5视频的Android应用程序，我已经在firefox，chrome，opera和IE上测试了视频，视频控件显示全屏按钮，但在Android棒棒糖webview上没有全屏按钮，因此无法播放全屏视频。

我尝试了几种javascript方法来最大化视频，但都没有效果。这是铬的错误还是有办法激活按钮？

PS：我似乎并不孤单https://code.google.com/p/chromium/issues/detail?id=470666

Answer 1

Android文档说

您需要设置WebChromeClient并实现onShowCustomView（View，WebChromeClient.CustomViewCallback）和onHideCustomView（）。如果缺少这两种方法中任何一种的实现，则不允许Web内容进入全屏。

如果您只是将代码放在设置webview的位置，则会显示该按钮。你不需要对代码做任何事情，你只需要实现它，否则股票android会隐藏按钮。

webView.setWebChromeClient(new WebChromeClient() {

        public void onShowCustomView (View view, WebChromeClient.CustomViewCallback callback) {
            //do stuff
        }

        public void onHideCustomView () {
            //do stuff
        }

    });

Answer 2

我设法通过在包含单词link的视频下面的html页面上创建fullscreen来解决我的问题，

链接示例：

<a href="http://example.com/video.mp4?fullscreen">fullscreen</a>

然后使用webview方法shouldOverrideUrlLoading覆盖包含单词fullscreen的任何网址，将其重定向到Android视频播放器。

mWebView.setWebViewClient(new WebViewClient(){
    public boolean shouldOverrideUrlLoading(WebView wView, String url)
        {

                if (url.contains("fullscreen") ) {
                    Log.i("LOB", "FULLSCREEN " + url);

                 try {
                   url = url.replaceAll("(?im)fullscreen", "");
                     } catch (PatternSyntaxException ex) {
                     } catch (IllegalArgumentException ex) {
                     } catch (IndexOutOfBoundsException ex) {
                   }


                    Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
                    intent.setDataAndType(Uri.parse(url), "video/mp4");
                    startActivity(intent);

                       return true;
                   }

}
}

这远不是一个优雅的解决方案，但谷歌并没有在Lollipop上解决这个问题，这是一个有效的解决方法

Answer 3

嘿，这是一个老问题，但这是我的最新解决方案。我正在使用 Kotlin和AndroidX。 首先，您需要在“视频活动布局”中添加两个视图，如下所示：

   <?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto">
<FrameLayout
        android:id="@+id/videoFrame"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:elevation="10dp" android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent">
</FrameLayout>
<WebView
        android:id="@+id/webview"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>

您将使用 videoFrame 框架布局来设置额外的全屏内容，并为您的网络内容显然使用 webview 。

然后，使用一种方法将网址加载到您的网络视图：

private fun initWebView(webUrl : String){
    val webView : WebView? = this.findViewById(R.id.webview)
    val videoFrame : FrameLayout? = this.findViewById(R.id.videoFrame)
    webView?.settings?.apply {
        mediaPlaybackRequiresUserGesture = true
        javaScriptEnabled = true //use this carefully
    }
    webView?.webChromeClient = object : WebChromeClient () {
        override fun onProgressChanged(view: WebView?, newProgress: Int) {
            Log.d(TAG, "WebChromeClient, onProgressChanged newProgress=$newProgress") }
        override fun onShowCustomView(fullScreenContent: View?, callback: CustomViewCallback?) {
            super.onShowCustomView(fullScreenContent, callback)
            Log.d(TAG, "onShowCustomView")
            fullScreenContent?.let {fullScreenView ->
                videoFrame?.removeAllViews()
                videoFrame?.visibility = View.VISIBLE
                videoFrame?.addView(fullScreenView)
            }
        }
        override fun onHideCustomView() {
            super.onHideCustomView()
            Log.d(TAG, "onShowCustomView")
            videoFrame?.visibility = View.GONE
            videoFrame?.removeAllViews()
        }

    }
    webView?.loadUrl(webUrl)
}

当您覆盖 onShowCustomView 和 onHideCustomView 方法时，魔术就会发生。只需将 fullScreenContent 添加到 videoFrame 布局中即可。

仅此而已。它可以在Android 9上正常工作（并经过测试）。

Answer 4

共享HTML5视频时，用户必须使用iframe。出于安全原因，共享视频的网站必须包含允许全屏视频的参数。它缺少allowfullscreen参数。它应该是这样的：

<iframe width="560" height="315" src="https://www.youtube.com/embed/kVFBmPsugus" frameborder="0" allowfullscreen></iframe>

Answer 5

试试这个：

WebSettings settings = mWebView.getSettings();
settings.setUseWideViewPort(true);

webview上的Html5视频缺少棒棒糖上的全屏按钮

5 个答案: