Hide iOS Safari Native low-power Play Button-CodePudding

When you add the autoplay attribute to a video you will get a native iOS play button on top of the video when low power mode is active.

Is there any way to remove this native button? I've search and found several solution but none seem to do the trick.

It should be possible since the AirPods page has a video on it with the desired effect when low power mode is available: https://www.apple.com/airpods/

I was wondering if someone knows what trick they use to hide the native iOS play button.

Thanks in advance.

I've created this CodePen to experiment in: https://codepen.io/anchorsmith/pen/dyepbrR

CodePudding user response：

Unfortunately, there is no easy way around this issue. Autoplay will automatically result in a play button overlaying. If you turn off/disable autoplay, it will no longer have that result. Alternatively, you could use this snippet of code:

video::-webkit-media-controls {
    display:none !important;
}

This would disable the controls, such as play, pause, and volume changing. This could have unforeseen negative effects though, so use it as a last resort.

In addition, you could also try this snippet:

*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}

CodePudding user response：

Found this sandbox: https://codesandbox.io/s/relaxed-franklin-h2zkhl?file=/src/scripts/index.ts:0-87

Apparently you can set a setTimeout to autoplay without an autoplay attribute.

It will throw an error on low power mode, but that can of course be caught.