Repository: flutter
Issue: [video_player_web] iOS Shows Video Controls (even when disabled in source)
Labels: platform-web,p: video_player,package,P2,browser: safari-ios,team-web,triaged-web

When an iOS device is in "Low Power Mode", the Video Player in Safari will show a big Play button that interferes with the normal lifecycle and the user supplied styling of the video_player_web Widget:

| Normal | Low power |
|--|--|
| ![normal](https://user-images.githubusercontent.com/1255594/126425195-5c5bfc26-9542-4089-a35d-be5e845c22ff.jpg) | ![low-power](https://user-images.githubusercontent.com/1255594/126425219-7c019ed7-aba6-4b94-ae8f-6a0ab19fa284.jpg) |

Note that the `controls` property is explicitly disabled in [the plugin source](https://github.com/flutter/plugins/blob/master/packages/video_player/video_player_web/lib/video_player_web.dart#L180-L186).

**Can this button be removed or styled out?**

## Steps to Reproduce

<!-- You must include full steps to reproduce so that we can reproduce the problem. -->

1. Run `flutter create bug`.
2. Add a dependency on `video_player: ^2.1.10`
3. Update `main.dart` as follows:

  <details>
  <summary>
  <tt>main.dart</tt>
  </summary>
  
  ```dart
  import 'package:flutter/material.dart';
  import 'package:video_player/video_player.dart';

  void main() {
    runApp(
      MaterialApp(
        home: _App(),
      ),
    );
  }

  class _App extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Video player example'),
        ),
        body: _BumbleBeeRemoteVideo(),
      );
    }
  }

  class _BumbleBeeRemoteVideo extends StatefulWidget {
    @override
    _BumbleBeeRemoteVideoState createState() => _BumbleBeeRemoteVideoState();
  }

  class _BumbleBeeRemoteVideoState extends State<_BumbleBeeRemoteVideo> {
    late VideoPlayerController _controller;

    bool _initialized = false;

    @override
    void initState() {
      super.initState();
      _controller = VideoPlayerController.network(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
      );

      _controller.addListener(() {
        if (_controller.value.isInitialized) {
          setState(() {
            _initialized = true;
          });
        }
      });
      _controller.setLooping(true);
      _controller.initialize();
    }

    @override
    void dispose() {
      _controller.dispose();
      super.dispose();
    }

    void onPressed() {
      if (_controller.value.isPlaying) {
        _controller.pause();
      } else {
        _controller.play();
      }
    }

    @override
    Widget build(BuildContext context) {
      return Center(
        child: SingleChildScrollView(
          child: Column(
            children: [
              TextButton.icon(
                onPressed: _initialized ? this.onPressed : null,
                icon: Icon(Icons.play_arrow_rounded),
                label: Text('Play/Pause'),
              ),
              AspectRatio(
                aspectRatio: 16 / 9,
                child: VideoPlayer(_controller),
              ),
            ],
          ),
        ),
      );
    }
  }
  ```

  </details>

4. Run your flutter web app so you can access it in a browser. [Or click here](https://dit-fullscreen-video.web.app).
5. Set your device in "Low Power Mode" ("yellow battery")
6. Visit the site (you will see the Play button)
7. Unset "Low Power Mode" in your device
8. Refresh the page (you will NOT see the Play button).

**Expected results:**

I would like to **NOT** see the Play button in Low Power Mode.

**Actual results:** <!-- what did you see? -->

Well, the Play button shows up in Low Power Mode and can interfere with other UIs built on top of the video player widget.

<details>
  <summary>Logs</summary>

<!--
      Run your application with `flutter run --verbose` and attach all the
      log output below between the lines with the backticks. If there is an
      exception, please see if the error message includes enough information
      to explain how to solve the issue.
-->

```
No error output.
```

<!--
     Run `flutter analyze` and attach any output of that command below.
     If there are any analysis errors, try resolving them before filing this issue.
-->

```
No issues found! (ran in 1.3s)
```

<!-- Finally, paste the output of running `flutter doctor -v` here. -->

```
[✓] Flutter (Channel master, 2.4.0-1.0.pre.104, on Debian GNU/Linux rodete 5.10.40-1rodete1-amd64, locale
    en_US.UTF-8)
    • Flutter version 2.4.0-1.0.pre.104 at /usr/local/google/home/dit/github/flutter
    • Upstream repository git@github.com:ditman/flutter.git
    • Framework revision de36e51155 (13 days ago), 2021-07-08 03:21:02 +0530
    • Engine revision a1468f9b24
    • Dart version 2.14.0 (build 2.14.0-285.0.dev)
```

</details>


**This is most likely a Safari bug/feature, and not an issue limited to Flutter Web**, more info/possible web workarounds on [Stack Overflow: _Hide iPhone HTML5 video play button_](https://stackoverflow.com/a/58611603/1738205).

Originally reported internally by @gdcolella (Thanks, Greg!)