html5 视频不适用于 android webview

Question

我已经在 webview 中运行了 android 应用程序一年了。但是几天前有一些客户说我的应用程序中没有播放 html5 视频。我有五部手机进行测试，我所有的手机都没有问题。大多数客户使用该应用程序没有任何问题。

我将 preload 属性值从 auto 更改为 meta 因为我想是由于网络负载。

下图为客户截图。有27:10的时间，没有加载的spinner。（我觉得loading结束了）但是客户无法按下播放键，按下播放键时，视频元素周围出现一条橙色线。

客户的手机是galaxy note 8&galaxy J7，android版本是8。但是在我的测试中没有问题。并且有 Android 8 客户使用该服务没有任何问题。

我该如何解决？谢谢。

html

<video preload="meta" width="95%" autoplay="autoplay" controls="" playsinline="">               
        <source type="video/mp4" src="url.../file.mp4">
        HTML5 is not supported.
    </video>

android - 主活动

public class MainActivity extends AppCompatActivity {

    private WebView webView;
    private BackPressCloseHandler backPressCloseHandler = new BackPressCloseHandler(this);

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webView);
        /* webView settings */
        webView.getSettings().setSupportZoom(true);
        webView.getSettings().setBuiltInZoomControls(true);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
        webView.setWebChromeClient(new FullscreenableChromeClient(MainActivity.this));
        webView.setWebViewClient(new WebViewClientClass());

        webView.loadUrl("MY URL IS HERE");
    } //onCreate

    private class WebViewClientClass extends WebViewClient {

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }

自定义类以启用视频全屏

import android.app.Activity;
import android.content.Context;
import android.os.Build;
import android.support.v4.content.ContextCompat;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.webkit.WebChromeClient;
import android.widget.FrameLayout;

public class FullscreenableChromeClient extends WebChromeClient {
    private Activity mActivity = null;

    private View mCustomView;
    private WebChromeClient.CustomViewCallback mCustomViewCallback;
    private int mOriginalOrientation;
    private FrameLayout mFullscreenContainer;
    private static final FrameLayout.LayoutParams COVER_SCREEN_PARAMS = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);

    public FullscreenableChromeClient(Activity activity) {
        this.mActivity = activity;
    }

    @Override
    public void onShowCustomView(View view, CustomViewCallback callback) {

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
            if (mCustomView != null) {
                callback.onCustomViewHidden();
                return;
            }

            mOriginalOrientation = mActivity.getRequestedOrientation();
            FrameLayout decor = (FrameLayout) mActivity.getWindow().getDecorView();
            mFullscreenContainer = new FullscreenHolder(mActivity);
            mFullscreenContainer.addView(view, COVER_SCREEN_PARAMS);
            decor.addView(mFullscreenContainer, COVER_SCREEN_PARAMS);
            mCustomView = view;
            setFullscreen(true);
            mCustomViewCallback = callback;
//          mActivity.setRequestedOrientation(requestedOrientation);

        }

        super.onShowCustomView(view, callback);
    }

    @SuppressWarnings("deprecation")
    @Override
    public void onShowCustomView(View view, int requestedOrientation, WebChromeClient.CustomViewCallback callback) {
        this.onShowCustomView(view, callback);
    }

    @Override
    public void onHideCustomView() {
        if (mCustomView == null) {
            return;
        }

        setFullscreen(false);
        FrameLayout decor = (FrameLayout) mActivity.getWindow().getDecorView();
        decor.removeView(mFullscreenContainer);
        mFullscreenContainer = null;
        mCustomView = null;
        mCustomViewCallback.onCustomViewHidden();
        mActivity.setRequestedOrientation(mOriginalOrientation);

    }

    private void setFullscreen(boolean enabled) {

        Window win = mActivity.getWindow();
        WindowManager.LayoutParams winParams = win.getAttributes();
        final int bits = WindowManager.LayoutParams.FLAG_FULLSCREEN;
        if (enabled) {
            winParams.flags |= bits;
        } else {
            winParams.flags &= ~bits;
            if (mCustomView != null) {
                mCustomView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE);
            }
        }
        win.setAttributes(winParams);
    }

    private static class FullscreenHolder extends FrameLayout {
        public FullscreenHolder(Context ctx) {
            super(ctx);
            setBackgroundColor(ContextCompat.getColor(ctx, android.R.color.black));
        }
        @Override
        public boolean onTouchEvent(MotionEvent evt) {
            return true;
        }
    }
}

清单文件

<video preload="meta" width="95%" autoplay="autoplay" controls="" playsinline="">               
        <source type="video/mp4" src="url.../file.mp4">
        HTML5 is not supported.
    </video>

Answer 1

下面的代码对我来说工作正常，请检查一次

在清单文件中添加这一行

   <application android:hardwareAccelerated="true" ...>

主要活动

public class MainActivity extends AppCompatActivity {

private WebView webview;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    webview = findViewById(R.id.webView);
    webview.setWebViewClient(new MyBrowser());
    webview.setWebChromeClient(new WebChromeClient());
    webview.getSettings().setLoadsImagesAutomatically(true);
    webview.getSettings().setJavaScriptEnabled(true);
    webview.getSettings().setAllowFileAccess(true);
    webview.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
    webview.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
    webview.getSettings().setPluginState(WebSettings.PluginState.ON);
    webview.getSettings().setMediaPlaybackRequiresUserGesture(false);
    webview.loadUrl("https://www.w3schools.com/html/html5_video.asp");
}

private class MyBrowser extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }
}

}

活动_main.xml

<?xml version="1.0" encoding="utf-8"?>

<WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

Answer 2

我的视频应用程序上的 Android System Webview 73 也遇到了同样的问题。默认 html5 视频播放器似乎存在一些样式问题。我可以自动播放或调用 JavaScript 中的 play() 函数。

我的解决方案是使用其他一些 javascript 视频播放器。我使用 videoJS 替换了视频播放器界面，现在它可以工作了。