html – How to hide html5 video controls on iOS 12-ThrowExceptions

Exception or error:

HTML5 video player has been showing controls only in iOS 12.x.x even when the controls are set to false in video tag but all other browsers are working fine and don’t show the controls.

The scenario is that whenever page loads we autoplay the video on banner but if battery saver feature is turned on then it will not autoplay the video shows the play button with initial thumbnail (only in iOS 12.x.x) while in other browsers it shows the initial thumbnail of the video without any play button.

My code looks like this:

<video id="header-video" autoplay="true" controls="false" playsinline="true" muted="true" loop="true">
  // sources here
</video>

I am looking for the solution to hide this play icon (shown in attached image) but if that’s not possible then is there any solution through which I can know that power saving mode is turned on and hide the video (because I have a background for backward compatibility).

**enter image description here**

How to solve:

I’ve given a look as well, and it seems as many CSS and JavaScript solutions out there don’t work anymore, because since iOS 12 there is a new way of handling videos (https://www.reddit.com/r/apple/comments/8p4tpm/ios_12_to_include_custom_html_video_player/).

Now I came up with this idea, which as a purist I don’t like, but it might do the trick: A video thumbnail (as image) overlayed over the video, that gets hidden, once the video is started.

You could have a standard thumbnail with title, or dynamically generate it (see http://usefulangle.com/post/46/javascript-get-video-thumbnail-image-jpeg-png as an idea).

Hope this helps!

###

Setting autoplay to false and controls to false did work for me:

<video
    src='xxxx'
    muted
    className='landing__empty-video'
    loop
    playsInline
    autoPlay={false}
    controls={false}
    preload='auto'
    type='video/mp4'
/>

Bear in mind this was React, in html case it would be “false”.

###

Removing control attribute from the Video tag will work

Note: The values “true” and “false” are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

Leave a Reply

Your email address will not be published. Required fields are marked *