| Summary: | Unable to hide native video controls when iOS has 'Low Power Mode' enabled and video is set to autoplay | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Artjom <artjomvinnikov> |
| Component: | Media | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED WONTFIX | ||
| Severity: | Normal | CC: | ditman, eric.carlson, graouts, hi, jonlee, smoley, webkit-bug-importer, youennf |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 14 | ||
| Hardware: | iPhone / iPad | ||
| OS: | iOS 14 | ||
Thanks for filing, I can reproduce this on iOS 13.6.1 as well as the latest iOS 14.4 beta. Toggling lower power mode and refreshing the test case causes the play button to show and hide. This has also been reported by a Flutter Web user: https://github.com/flutter/flutter/issues/86758 The play button shows up in Low Power Mode, regardless of the "controls" attribute on the video element, it seems. (I'd expect that if "controls" is not set, no controls would be shown by default by the browser). Autoplay is disabled when in low power mode to conserve battery, so we always show the "play" button for videos with the `autoplay` attribute so it is possible for the user to start them. This was done in https://bugs.webkit.org/show_bug.cgi?id=168985. |
iOS 14.1, 'Low Power Mode' enabled <video muted autoplay playsinline></video> Even though autoplay is set, video still has start/pause button on top of video that disappears after few seconds once playback has started. In the past I had the same issue without low power mode, that was fixed by adding this css: *::-webkit-media-controls-start-playback-button { display: none!important; -webkit-appearance: none; } However it doesn't help in this case. I tried targeting many other webkit specific pseudo elements but no luck. Link with small demo for reproduction: https://codesandbox.io/s/epic-edison-4fw2f?file=/index.html