iPhone displays double controls

[marinaglancy]

I decided to separate this problem from #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>

[arcticmatt]

The only way I could get this to work was by specifying playsinline on the video element. Which is not ideal because on mobile I'd like the video to be displayed full-screen when it's played.

[simplexx]

Is there a solution for this? I do not want to use playsinline, same as @arcticmatt

[storyguy88]

Same as @arcticmatt and @simplexx . The very reason our team came to this thread is because we don't want playsinline. We want full screen video playing on iOS, but after closing a full screen video, you should not see the native controls behind the custom controls.

[simplexx]

As far as I know, there are only two solutions currently to fix this problem, both are not elegant. First one is playsinline, as discussed already. Second one is to detect the browser via javascript and if it is mobile safari, implement some logic to hide the videojs controls and only use the native controls.

Apart from that, there is no solution currently (please correct me if I am wrong).

If somebody has some code for solution 2. - Would be nice to have it here as a reference.

[storyguy88]

Also confirming that Solution 2 would solve the duplicate controls, but it does not achieve what we want. We want to only display the videojs controls. Hide the native controls at all times except in full screen.

playsinline achieves this perfectly.

If you don't want to use playsinline (due to wanting your videos automatically to play in full screen on iOS), I have not found a solution. Without playsinline, the native controls seem appear in the minimized state no matter what .

[simplexx]

@storyguy88 The only additional solution I can think of is to change the approach to using playsinline, and then making the video parent container fullscreen on video play. This way, videojs could be used in pseudo-fullscreen, all without native controls. Did not try this yet though, but I am pretty sure it's possible.

[mister-ben]

Option 2 is the nativeControlsForTouch option.

I've not been able before, but testing now I can reproduce this consitently if swiping down to exit, but still not using the close button. It's a Safari bug that's adding the native controls unasked for, but disabling controls on the video el on exiting fullscreen will work around it.

[storyguy88]

@mister-ben I'm hoping my research documented below confirms your approach.

The following can be summarized as the following:

On iOS:

• When not using playsinline, video automatically plays in full screen. < Expected
• When full screen video is closed using the CLOSE button, video returns to small size, displaying only the VJS controls. < Expected
• When full screen video is closed using SWIPE DOWN, video returns to small size, but suddenly the controls attribute is added to <video class="vjs-tech" controls... resulting in the native controls appearing in addition to the VJS controls < Not Expected

If controls was never automatically added to <video class="vjs-tech" ...> upon closing the full screen video by swiping down, then the problem would be solved.

Looking for a solution to override and force the controls attribute to always be removed.

---

Screenshots

[mister-ben]

Thanks for the detail!. That matches what I'm seeing. Could you try out this and see if that's fixing it for you? It does on Simulator and the one iPhone I have to hand.

https://deploy-preview-7634--videojs-preview.netlify.app/sandbox/index.html

[storyguy88]

Confirmed @mister-ben ! On my iphone, whatever is happening in that sandbox is exactly as expected. Video plays full screen (no playsinline) which is good, and when it's not full screen, I only ever see videojs controls, no native controls. Bravo!

[storyguy88]

Hey @mister-ben , great work on #7634 ! Is that merge-able? We're excited to use it.