html5 video does not work with android webview
Solution 1
The below code is working fine for me please check once
add this line in manifest file
<application android:hardwareAccelerated="true" ...>
MainActivity
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"/>
Solution 2
I had the same issue with Android System Webview 73 on my video app. It seems like there is some style issue with the default html5 video player. I can do the auto play or call the play() function in javascript.
My solution is to use some other javascript video player. I used videoJS to replace the video player interface and it is working now.
S.E Saint
Updated on June 04, 2022Comments
-
S.E Saint almost 2 years
I have been running the android app in webview for a year. But there are some customers who say html5 video is not playing in my app a few days ago. I have five phones for testing, and there is nothing wrong with all my phones. Most customers are using the app without any problems.
I changed the preload property value from auto to meta because I want to be due to network load.
The picture below is a screenshot from the customer. There is a time of 27:10, and there is no spinner for loading. (I think loading is over) However, the customer can not press the play button, and when the play button is pressed, an orange line appears around the video element.
The customer's cell phone is galaxy note 8 & galaxy J7 and the android version is 8. But in my test there was no problem. And there are Android 8 customers who are using the service without any problems.
How can I solve it? thanks.
html
<video preload="meta" width="95%" autoplay="autoplay" controls="" playsinline=""> <source type="video/mp4" src="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"); } //onCreate private class WebViewClientClass extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } }
custom class to enable video Fullscreen
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>
-
Ernie Thomason about 5 yearsThe line that fixed it for me is webView.getSettings().setMediaPlaybackRequiresUserGesture(false); (API 17) But I still can't get the full-screen button to work anymore!
-
Seb83 almost 5 years@ErnieThomason I had the same problem and setMediaPlaybackRequiresUserGesture(false) fixed it !