Video.js: iOS 12.4.1 incompatibility?

[anibarro]

Hi, I have a muted video playing that worked in iOS until 12.3.1, but it doesn't work in iOS 12.4.1.
Is there any breaking changes in this version or something that I'm doing wrong?

Please check this demo in iOS 12.4.1 and then on earlier versions.

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[gkatsev]

Playback works for me on iOS 12.4.1 via your demo. What exactly are the symptoms you are seeing?

[anibarro]

Playback works for me on iOS 12.4.1 via your demo. What exactly are the symptoms you are seeing?

I got complaints from other people and for me the video is not starting in an iPhone SE running on iOS 12.4.1, I just see the image set as poster. It does work in an iPhone 5s running iOS 12.3.1.
Which device are you testing in? Is the video in this page also playing for you when it gets into the view?

Thank you!

[gkatsev]

Yup, I can see the video play back on that page as well.

I'm testing on an ipad mini as it's the only iOS 12.4.1 device available to me.

[anibarro]

Ummm... it might be a device-related issue, I'll check tomorrow in other devices and post my results.
Thanks a lot for testing!

[gjanblaszczyk]

I have tested your website on my iPhone 7 on IOS 12.4.0 and It works fine. However, please note that iPhone will not autoplay videos when it is in "Low power mode".

[anibarro]

I have tested your website on my iPhone 7 on IOS 12.4.0 and It works fine. However, please note that iPhone will not autoplay videos when it is in "Low power mode".

Oh God...!! I was getting crazy because it looked totally random, but that's exactly the issue!!
Thanks a lot for pointing that out, and sorry for the stupid mistake... :$

[gjanblaszczyk]

np and I guess you should consider adding some big play button control over the player if the autoplay policy blocks video playback...

[anibarro]

The poster image didn't look good, but you are right, after fixing that the next thing would be adding a button :)

[simeyla]

Regarding LOW POWER MODE (in caps because I always forget this one).

1) I tested only on iOS so far
2) I don't want nativeControlsForTouch: true because that keeps the iOS controls on screen on top of my video and that doesn't work for my UI
3) When autoplay fails there is no play button (because videoJS isn't detecting it)

Here's my tentative solution:

   const player = videojs(element, 
               { 
                  autoplay: true,
                  controls: true, 
                  sources: ....
               });

    // hide big play button (it's kinda ugly - sorry but it is)
    const bigPlayButton = player.bigPlayButton;
    bigPlayButton.hide();

    // if autoplay doesn't work (such as if low power mode is on)
    // then we show the bigPlayButton
    setTimeout(() => bpp.show(), 1500);

This will hide the big play button and show it if playback doesn't start within 1.5 seconds. May need fine tuning based on preference. And in case you're wondering the play button won't suddenly appear because of the CSS (the hide() sets the class .vjs-hidden which hides the button and in addition once playback has started the .vjs-has-started class permanently hides it anyway).

Would welcome a built in better approach if there is one. This seems to work fine for me.