Html5 网络视图上的视频缺少棒棒糖上的全屏按钮

Question

我正在开发一个 android 应用程序，它可以在 webview 上播放 html5 视频，我已经在 firefox、chrome、opera 和 IE 以及视频控件上测试了这些视频显示全屏按钮，但在 android lollipop webview 上没有全屏按钮，因此无法全屏播放视频。

我尝试了几种 javascript 方法来最大化视频，但 none 奏效了。这是 Chrome 上的错误还是有激活按钮的方法？

PS：看来我不是一个人在这https://code.google.com/p/chromium/issues/detail?id=470666

Answer 1

我已经通过在包含 fullscreen、

一词的视频下方的 html 页面上创建 link 来解决我的问题

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;
                   }

}
}

这远不是一个优雅的解决方案，但是虽然 Google 没有为 Lollipop 提供修复，但它可以完成工作。

Answer 2

Android 文档说

you need to set a WebChromeClient and implement both onShowCustomView(View, WebChromeClient.CustomViewCallback) and onHideCustomView(). If the implementation of either of these two methods is missing then the web contents will not be allowed to enter full screen.

如果您只是将代码扔到设置 webview 的地方，按钮就会出现。您不必对代码做任何事情，您只需要实现它，否则 stock android 将隐藏按钮。

webView.setWebChromeClient(new WebChromeClient() {

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

        public void onHideCustomView () {
            //do stuff
        }

    });

Answer 3

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

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

Answer 4

嘿，这是一个老问题，但这里是我更新的解决方案。我正在使用 Kotlin 和 AndroidX. 首先，您的 'video activity layout' 中需要两个视图，如下所示：

   <?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 加载到您的网络视图：

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.

上运行（并经过测试）

Html5 网络视图上的视频缺少棒棒糖上的全屏按钮

Html5 video on webview missing fullscreen button on lollipop

android

html

webview

html5-video