Video.js: iPhone displays double controls

[marinaglancy]

I decided to separate this problem from videojs/video.js#3761 because I can suggest a patch for this one.

Problem: Videos on iPhone have double controls - one native and one provided by Video.JS.
There is no difference if I set "nativeControlsForTouch": false or not (as suggested in #3305).
Specifying a poster on the video hides the play button but still does not hide the controls when you click the video in non-fullscreen mode. I suggest you to add this to standard Video.JS CSS something like that:

        video::-webkit-media-controls-panel,
        video::-webkit-media-controls-panel-container,
        video::-webkit-media-controls-start-playback-button {
            display:none !important;
            -webkit-appearance: none;
        }

Example: http://prototype.moodle.net/media/videojs1.htm (without custom CSS)
http://prototype.moodle.net/media/videojs2.htm (with custom CSS)

I have created an issue in Moodle tracker https://tracker.moodle.org/browse/MDL-56829 too

[mister-ben]

@marinaglancy I think so but to confirm, this is also resolved by using playsinline?

[marinaglancy]

Double controls do not appear on ios 10 when using playsinline attribute, but since it's not a default attribute (and actually an optional one), I believe, videojs should address this in the player. Double controls can't be hidden on ios 9 at all.

On previous versions of ios, if I remember correctly, only native controls are displayed.

[davidwilde]

+1
I also see the issue of double controls in ios. My use case requires to not have the playsinline attribute set because I need to enter fullscreen mode on playing event.

[Aqzhyi]

I also see the issue of double controls in iPhone6s plus with ios 10.2.

FYI, I use

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

to hide it.

it works.

[daslicht]

@Pleasurazy It has no effect here on an iPhone 7 :/

<video playsinline>

seams to work.

[DieterPagel]

Does anyone perhaps have a working code example for me on how to play video inline on iOS? We have read extensively in the forums and tried all suggestions but we just can't seem to get it to work

[verybluebot]

none of the above solutions worked for me. still seeing video.js and native browser controls on IOS 13

[gkatsev]

@verybluebot can you provide more details? I don't actually see double controls anymore and haven't for a while.

[gabycperezdias]

I had to use @marinaglancy 's solution with the css and also the playsinline prop to have videojs working as it should...

I am currently using videojs inside a react app, so I have this scenario:

 <div data-vjs-player>
   <video ref={(el) => this.videoRef = el} className="video-js" playsinline />
  </div>

But to really make it work, I had to use the playsinline in the video tag AND in the videoJsOptions passed as the second param on videojs(this.videoRef, videoJsOptions, function onPlayerReady() {})

Trying on Safari / iPhone 8 / iOS 13.6

[verybluebot]

@gkatsev Im using a IOS WebKit from RN (which don't really should matter) to open the videojs on mobile (served from my server)
still seeing the controls after adding to my html/css (on the server)

        video::-webkit-media-controls-panel,
        video::-webkit-media-controls-panel-container,
        video::-webkit-media-controls-start-playback-button {
            display:none !important;
            -webkit-appearance: none;
        }

adding the boolean property <video playsinline>