How to pause a WebView in flutter?
Got the same issue on Android side with webview_flutter: ^0.3.18+1
.I found a solution to pause the video by requesting audio focus again in the onPause
callback of host Activity
.
val audioManager = activity.getSystemService(Context.AUDIO_SERVICE) as AudioManagerif (audioManager.isMusicActive) { if (Utils.hasOreoSDK26()) { val audioAttributes = AudioAttributes.Builder() .setUsage(AudioAttributes.USAGE_MEDIA) .setContentType(AudioAttributes.CONTENT_TYPE_MUSIC) .build() val audioFocusRequest = AudioFocusRequest.Builder(AudioManager.AUDIOFOCUS_GAIN_TRANSIENT) .setAudioAttributes(audioAttributes) .setAcceptsDelayedFocusGain(true) .setWillPauseWhenDucked(true) .setOnAudioFocusChangeListener( { focusChange -> Timber.i(">>> Focus change to : %d", focusChange) }, Handler()) .build() audioManager.requestAudioFocus(audioFocusRequest) } else { audioManager.requestAudioFocus({ }, AudioManager.STREAM_MUSIC, AudioManager.AUDIOFOCUS_GAIN_TRANSIENT) }}
Also check this issue.
It's not possible from Dart using the webview_flutter
plugin.However, you can use my plugin flutter_inappwebview, which is a Flutter plugin that allows you to add inline WebViews or open an in-app browser window and has a lot of events, methods, and options to control WebViews.
It implements methods to pause/resume the WebView.
For Android, you can use InAppWebViewController.android.pause
and InAppWebViewController.android.resume
to pause and resume WebView.You should implement WidgetsBindingObserver
in your Widget and check AppLifecycleState state
through didChangeAppLifecycleState()
method.
If you need to pause/resume also JavaScript execution you can use InAppWebViewController.pauseTimers
/InAppWebViewController.resumeTimers
methods.
Here is an example with a YouTube URL:
import 'dart:async';import 'dart:io';import 'package:flutter/material.dart';import 'package:flutter_inappwebview/flutter_inappwebview.dart';Future main() async { WidgetsFlutterBinding.ensureInitialized(); runApp(MyApp());}class MyApp extends StatefulWidget { @override _MyAppState createState() => new _MyAppState();}class _MyAppState extends State<MyApp> with WidgetsBindingObserver { InAppWebViewController webView; @override void initState() { WidgetsBinding.instance.addObserver(this); super.initState(); } @override void dispose() { WidgetsBinding.instance.removeObserver(this); super.dispose(); } @override void didChangeAppLifecycleState(AppLifecycleState state) { print('state = $state'); if (webView != null) { if (state == AppLifecycleState.paused) { webView.pauseTimers(); if (Platform.isAndroid) { webView.android.pause(); } } else { webView.resumeTimers(); if (Platform.isAndroid) { webView.android.resume(); } } } } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text('InAppWebView Example'), ), body: Container( child: Column(children: <Widget>[ Expanded( child: InAppWebView( initialUrl: "https://www.youtube.com/watch?v=NfNdXgJZfFo", initialHeaders: {}, initialOptions: InAppWebViewGroupOptions( crossPlatform: InAppWebViewOptions( debuggingEnabled: true, ), ), onWebViewCreated: (InAppWebViewController controller) { webView = controller; }, onLoadStart: (InAppWebViewController controller, String url) {}, onLoadStop: (InAppWebViewController controller, String url) {}, )) ])), ), ); }}