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

Posted 2023-05-08

【中文标题】webview上的Html5视频缺少棒棒糖上的全屏按钮

【英文标题】：Html5 video on webview missing fullscreen button on lollipop

【发布时间】：2015-06-12 18:42:58

【问题描述】：

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

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

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

【问题讨论】：

你也可以使用这个代码：https://***.com/questions/38842869/how-to-fullscreen-youtube-video-in-webview/48598684#48598684

【参考方案1】：

Android 文档说

您需要设置 WebChromeClient 并同时实现 onShowCustomView(View, WebChromeClient.CustomViewCallback) 和 onHideCustomView()。如果缺少这两种方法中的任何一种的实现，则网页内容将不允许进入全屏。

如果您只是在设置 webview 的地方扔代码，按钮就会显示出来。你不需要对代码做任何事情，你只需要实现它，否则股票 android 会隐藏按钮。

webView.setWebChromeClient(new WebChromeClient() 

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

        public void onHideCustomView () 
            //do stuff
        

    );

【讨论】：

为了设备之间的兼容性，onShowCustomView 和 onHideCustomView 必须在*** WebChromeClient 子类中实现，因为一些制造商不会遍历它的子类。 （这里是启用全屏支持的正确源代码grepcode.com/file/repository.grepcode.com/java/ext/…）

@yarr，链接好像坏了？

我试过这个（使用 hls.js 填充视频元素），因为我看到全屏按钮被禁用/变灰。它确实启用了全屏按钮，但是当点击视频时，视频只是冻结并且播放器变得完全没有响应。我什至用“@Override”装饰了上面的内容并调用了超级但没有运气。

chromium.googlesource.com/chromium/src/android_webview/glue/+/… 看看dosSupportFullscreen方法@WilliamT.Mallard

【参考方案2】：

我已通过在包含单词fullscreen 的视频下方的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;
                   

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

【参考方案3】：

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

   <?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout
    android:layout_
    android:layout_
    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_
        android:layout_
        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_
        android:layout_
        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 上运行（并经过测试）。

【参考方案4】：

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

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