html5视频无法与android webview一起使用

行是知之始,知是行之成。这篇文章主要讲述html5视频无法与android webview一起使用相关的知识，希望能为你提供帮助。
我一直在webview上运行android应用程序一年。但也有一些客户说几天前我的应用程序中没有播放html5视频。我有五部手机需要测试，我的所有手机都没有问题。大多数客户使用该应用程序没有任何问题。
我将preload属性值从auto更改为meta，因为我想要归因于网络负载。
下图是客户的截图。有一个27:10的时间，并没有装载的微调器。（我认为加载已结束）但是，客户无法按下播放按钮，按下播放按钮时，视频元素周围会出现橙色线条。

文章图片

【html5视频无法与android webview一起使用】客户的手机是galaxy note 8和galaxy J7，Android版本是8.但在我的测试中没有问题。并且有Android 8客户正在使用该服务而没有任何问题。
我该如何解决？谢谢。
HTML

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

android-MainActivity

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"); } //onCreateprivate 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; } } }

的manifest.xml

< ?xml version="1.0" encoding="utf-8"?> < manifest xmlns:android="http://schemas.android.com/apk/res/android" package="..."> < uses-permission android:name="android.permission.INTERNET" /> < uses-permission android:name="android.permission.READ_PHONE_STATE" /> < application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:hardwareAccelerated="true" android:theme="@style/AppTheme"> < activity android:name="....webview.MainActivity" android:configChanges="keyboardHidden|orientation|screenSize"> < /activity> < activity android:name="....webview.IntroActivity"> < intent-filter> < action android:name="android.intent.action.MAIN" /> < category android:name="android.intent.category.LAUNCHER" /> < /intent-filter> < /activity> < /application> < /manifest>

答案我在视频应用上遇到了与Android System Webview 73相同的问题。看起来默认的html5视频播放器存在一些风格问题。我可以在javascript中进行自动播放或调用play（）函数。
我的解决方案是使用其他一些javascript视频播放器。我使用videoJS来取代视频播放器界面，它现在正在运行。
另一答案以下代码对我来说工作正常，请检查一次
在清单文件中添加此行

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

}
activity_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"/>

另一答案由于javascript调用播放/暂停视频工作，我通过在视频前面添加div并调整大小以匹配Android放置在视频中心附近的播放按钮来修复此问题。以下是React的片段：

const isAndroid = () => navigator.userAgent.indexOf('Android') > = 0; let videoPlayer; ...< div className="video-wrap"> < video ref={node => videoPlayer = node} controls controlsList="nodownload" crossOrigin="anonymous" poster={episode.posterUrl} > < source src=https://www.songbingjia.com/android/{episode.h264Url} type="video/mp4" /> {episode.webmUrl ? ( < source src=https://www.songbingjia.com/android/{episode.webmUrl} type="video/webm" /> ) : null} {episode.vttUrl ? ( < track kind="captions" label="English" src=https://www.songbingjia.com/android/{episode.vttUrl} srcLang="en" /> ) : null} < /video> { isAndroid() ? ( < div className="android-playback-fix" onClick={e => { e.preventDefault(); if (videoPlayer.paused) { videoPlayer.play(); } else { videoPlayer.pause(); } }} > < /div> ) : null} < /div>

这是CSS：

.video-wrap { position: relative; }.android-playback-fix { border-radius: 100%; height: 75px; left: 50%; position: absolute; top: 45%; transform: translate(-50%, -50%); width: 75px; }

另一答案我遇到了同样的问题。
解决这个问题。
将id放在HTML视频标记上，并在java代码中调用id。
例如

< video id = "video" preload="meta" width="95%" autoplay="autoplay" controls="" playsinline=""> < source type="video/mp4" src="https://www.songbingjia.com/android/url.../file.mp4"> < /video>

在onPageFinished-WebViewClient的覆盖，把这个代码

webView.loadUrl("javascript:(function() { document.getElementById('video').play(); })()"); webView.loadUrl("javascript:(function() { document.getElementById('video').pause(); })()");

这将注入javascript函数以允许自动播放视频