Youtube videos playing on background when device is inactive. Which cause playstore to reject app

[PaulVinSoft249]

Environment

Flutter version: 1.17.0
Plugin version: flutter_inappwebview 3.3.0
Android version: 9.0
iOS version:---
Xcode version: ---
Device information: techno

Description

Expected behavior:

Current behavior:

Steps to reproduce

1. This
2. Than that
3. Then

Images

Stacktrace/Logcat

[pichillilorenzo]

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.

Check the API docs if you need more detail.

Howevert, here is an example with a YouTube video:

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) {},
          ))
        ])),
      ),
    );
  }
}

[PaulVinSoft249]

inAppWebview flickering anyway to go around that?

[pichillilorenzo]

What do you mean? Can you make an example/screen record?

[PaulVinSoft249]

I mean it flickers when keyboard show ups any way to go around that

[pichillilorenzo]

Unfortunately no. This is related to how Flutter embeds Android native views inside its widget tree.

I know that somebody is working on another way to embed Android native views.
I hope it will be better than what we have right now!

[PaulVinSoft249]

Ok awesome thank very helpfull

[xcc3641]

@thang510023 have u ever fixed bug when playing mp3 ?

[thegrxp]

This solution is working on Android but still have the issue on iOS

[thegrxp]

I got it working for both android and iOS by having webView.pauseTimers(); and webView.resumeTimers(); only set for Android. The Youtube video stops when you open a new app or when you are on the launcher, but continues if you are sliding between opened apps until you select one (same behavior as Youtube).

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) { 
        if (Platform.isAndroid) {
          webView.pauseTimers(); // Pause timers only for android
          webView.android.pause();
        }
      } else {
        if (Platform.isAndroid) {
          webView.resumeTimers(); // Resume timers only for android
          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) {},
          ))
        ])),
      ),
    );
  }
}

[UjjwaRaijada]

Unfortunately no. This is related to how Flutter embeds Android native views inside its widget tree.

I know that somebody is working on another way to embed Android native views.
I hope it will be better than what we have right now!

I must say, you guys have done an amazing job.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug and a minimal reproduction of the issue.