Video controls such as to play/pause not showing on android chrome for mp4 video for HTML5 video page

Question

I am using the HTML5 for loading the mp4 video on the browsers. For all the Desktop browsers, the video controls are shown without any problem but for my android phone when I am loading the page on the Chrome browser, I am not getting any controls such as to play/pause, progress Bar, etc.

While searching for the issue, I came to know that is could have occurred due to the modern-media-controls which is used by chrome browser on android.

Please suggest.

In the video tag, I am already using the controls as true but still, I am not able to see the control buttons on the page with the video.

Actual Result No play/pause button on the video player when the video is playing on the android chrome browser

Expected Result Play/Pause button should be displayed when a video is played on the Android Chrome browser.

Answer 1

The play/pause button is acheived at the bottom control bar for the webkit-browser (ie android-chrome) by using the following small implementation of the css code --

video::-webkit-media-controls-play-button{ display: flex !important; }

After bit of the research I came to above implementation and it worked perfectly for me.