在Lollipop系统上，WebView中的Html5视频缺少全屏按钮

Question

在Lollipop系统上，WebView中的Html5视频缺少全屏按钮

4

我正在开发一个Android应用程序，用于在Webview上播放HTML5视频。我已经在Firefox、Chrome、Opera和IE上测试了这些视频，并且视频控件显示全屏按钮。但在Android Lollipop Webview上，没有全屏按钮，因此无法以全屏方式播放视频。

我尝试了几种JavaScript方法来最大化视频，但都没有成功。这是Chromium的一个错误，还是有办法激活该按钮？

PS：看来我不是唯一遇到这个问题的人：https://code.google.com/p/chromium/issues/detail?id=470666

- Pedro Lobito

您也可以使用以下代码：https://dev59.com/BZnga4cB1Zd3GeqPb6x_#48598684 - Aashish Kumar

4个回答

1

我已经成功地通过在视频下面的HTML页面上创建一个包含单词“全屏”的link来解决了我的问题。

链接示例:

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

然后使用webview方法shouldOverrideUrlLoading来覆盖包含单词fullscreen的任何Url，将其重定向到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;
                   }

}
}

这并不是一种优雅的解决方案，但在谷歌没有为棒棒糖提供修复方案时，它仍然能够完成工作。

- Pedro Lobito

1

嘿，这是一个老问题，但这是我的更新解决方案。我使用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 来显示网页内容。

接下来，使用一种方法将 url 加载到你的 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上运行良好（已测试）。

- markomoreno

0

当分享HTML5视频时，用户必须使用iframe。出于安全考虑，共享视频的网站必须包含一个参数以允许全屏视频播放。缺少allowfullscreen参数。应该像这样：

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

- Vấn Huỳnh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lv99Zubat · Accepted Answer

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
        }

    });