10

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**

Mehmood Ahmad
  • 627
  • 2
  • 5
  • 22
  • I think what you can do is just hide your play button (not native iOS play button) when the website is open in safari iOS using javascript (detect the user-agent). – Inderjeet Singh Nov 27 '18 at 12:12
  • My application is a video streaming call. The play button is a green telephone to start the call, which once accepted by the other user, results in a stream, which I pipe into the video player. So the regular "play" function of a regular video is not applicable to my use of HTML5 video element. – Mozfet Nov 27 '18 at 14:26
  • What if you remove the `controls="false"` altogether? Do you still see it? – Taher A. Ghaleb Nov 29 '18 at 05:33
  • Removing controls="false" will show all the controls – Mehmood Ahmad Nov 29 '18 at 05:34

4 Answers4

5

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!

Vale
  • 76
  • 4
  • 1
    I am indeed planning a custom poster placeholder for the video if I cannot work around the Shadow DOM. Its a bit more tricky and messy, but if my bounty does not provide a solution, then I'll be forced down that route... – Mozfet Nov 27 '18 at 14:23
1

I know this was asked over one year ago but I wanted to share the solution for others.

What I did was, I removed the autoplay attribute from the video-element and because I still wanted it to behave as with the attribute I added following js.

const video = document.getElementById('video-input');
video.play();
Noah V.
  • 96
  • 4
0

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".

Goran Jakovljevic
  • 2,714
  • 1
  • 31
  • 27
  • The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether. https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes – Hyzyr Jan 07 '23 at 10:18
0

After trying several solutions on the internet and without success, I eventually managed to hide the video interface elements in autoplay when the save mode is enabled.

document.getElementById("hello").setAttribute("autoplay", "autoplay");
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <video id="hello" playsinline preload muted loop>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    </video>
</body>
</html>

https://jsfiddle.net/joelsilvaaaaaa/yb5s23xq/3/

Joel Silva
  • 3
  • 2