[V3] [3.0.0-beta.20] No controls shown when using Vimeo on iPhone

TipluMariusz commented 6 years ago

[x] Issue does not already exist
[x] Issue observed on https://plyr.io/beta/#vimeo

Expected behaviour

When using vimeo on iPhone, controls should be shown like so:

Actual behaviour

No controls shown when using Vimeo on iPhone

Environment

Browser: Safari
Version: ?
Operating System: iPhone 6
Version: iOS 11.2.2

Players affected:

[ ] HTML5 Video
[ ] HTML5 Audio
[ ] YouTube
[x] Vimeo

Steps to reproduce

Go to https://plyr.io/beta/#vimeo with an iPhone 6
Poster image is visible, but no controls shown (Video has not started yet)
You can click on the video though, and the video starts
But no controls are shown, you can't stop the video, even if you click again on the video

Further remarks

Controls are shown in HTML5 and YouTube
I only have an iPhone 6 currently, I will test this with another iOS device later

Thank you for the good work, the player loosk fantastic :+1:

sampotts commented 6 years ago

@card This should be fixed now 👍

SnugNest commented 6 years ago

I have the same question. When using html5 on iPhone, the big-play button should be shown and can play when click the big-play.

sampotts commented 6 years ago

It does 🙄

SnugNest commented 6 years ago

@sampotts No, it doesn‘t... you can see from the snugnest.com in iphone . I don't know what's wrong...

sampotts commented 6 years ago

OK but it does on https://plyr.io so you have a problem elsewhere...

devanflaherty commented 6 years ago

Just a note on this.

I'm using vue-plyr and it doesn't seem to be showing any plyr ui on mobile.

People can be experiencing issues with potential plugins. As I can't seem to get any plyr UI to show on iOS. Still trying to find the solution.

oskarame commented 6 years ago

Same problem for me, the big play button and the controls aren't appearing on iPhone

sampotts commented 6 years ago

Use the latest version - v3.1.0. If you're using a plugin/wrapper by someone else (like Vue, React, etc) then you need to contact the author to get them to upgrade...

oskarame commented 6 years ago

Ok thanks, I was using the 3.0.6 version, i'll try with the latest one. (ps : Not using vue, react etc.)

oskarame commented 6 years ago

@sampotts I don't want to disturb but it's still not working for me. It only doest that on iPhone, on iPad it's fine. I can't event stop the video. I even tried a test version of the page i'm coding, I removed all javascript except for plyr and still not working. I can send you the test link if you want.

verde-io commented 6 years ago

@sampotts Seeing the same problem. Using the latest Plyr version. The controls are not added on iOS for a vimeo embed. Youtube and native video are fine. Will further investigate tomorrow and come back here if I find what's causing it.

sampotts commented 6 years ago

Do you see the same on https://plyr.io ?

verde-io commented 6 years ago

@sampotts yes i see the video on your homepage.

This is what I use to initialise the players:

var player = new Plyr(this, { autoplay: false, controls: ['play', 'progress', 'mute', 'volume', 'fullscreen', 'settings'], settings: ['captions', 'quality'], fullscreen: { enabled: true, fallback: true, iosNative: true }, clickToPlay: true });

And this is the html:

<div id="player-454" class="video-player plyr__video-embed">
<iframe src="https://player.vimeo.com/video/222486164?loop=false&amp;autoplay=true&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media" allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>

Like I said before, youtube and video work fine.

verde-io commented 6 years ago

@sampotts tested last night on Android Chrome and it's fine there, on iOS it doesn't work in Chrome either. It seems like there's definitely a bug there.

verde-io commented 6 years ago

@sampotts I've done some debugging today and have found what the problem is.

For Vimeo, this condition on line 6653 truthy.includes(params.playsinline) is not met and as a result this.config.inline = true; isn't set.

This in turn causes var playsInline = browser.isIPhone && inline && support.inline to be false and as a result ui = support.rangeInput && (!browser.isIPhone || playsInline) is undefined.

As a result the controls don't get added for Vimeo on iOS.

sampotts commented 6 years ago

Thanks for that. I'll get a fix into the next release (hopefully tomorrow).

sampotts commented 6 years ago

This should actually be resolved now in v3.2.0

verde-io commented 6 years ago

@sampotts yes, seems to be working, thanks!

michaelpumo commented 3 years ago

I am getting this same issue in Plyr JS version v3.6.3 - has there been a regression on this bug?

Controls initially show and then once the video is playing (inline) there is no way to get the controls back in iOS Safari.

This is tested on an iPhone 11 Pro with iOS v13.3.1.

If you first see the controls then enter fullscreen mode before playing, you can play the video and get the controls back...but once minimising again to inline, the controls disappear: https://i.imgur.com/WdO3qml.png

As an additional issue...when entering fullscreen mode, the video appears at the top (instead of centred) and does not use native controls: https://i.imgur.com/MXqPJ65.png

I'm not sure if this is related or not.

I'm using Vimeo video using the "non progressively enhanced method" with JavaScript. e.g. <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>

fluctfelix commented 3 years ago

I confirm the same problem, Plyr JS version v3.6.3, IOS 14.4.2 on iPhone12. Downgrading to Plyr 3.6.1 solved the issue.

sampotts / plyr