on() Method not working on iPhone Safari

[Joolyan]

Extract from Plyr readme.md... "Mobile Safari on the iPhone forces the native player for

This is very true, however it would be very helpful if Plyr's ability to watch for events, also worked for iPhone users. I'm successfully using Plyr to trigger events for Google Analytics, but it appears that I'll need a separate solution using addEventListner for iPhone users.

I'm not sure if this is a feature request for Plyr, a bug with Plyr, or user error on my part?

Thanks for your help.

[Joolyan]

Update... I've been able to test solutions based on the standard HTML5 video player (using addEventListener) which work on the iPhone, but only limited success when using the addEventListener on the HTML video element of Plyr based solutions. Though everything appears to work for simple setups, but fails on more real world setups with more than one Plyr instance and changing media sources.

The only solution I can think of is to setup both Plyr and HTML5 video players, targeted at different devices.

[sampotts]

This should work so is definitely a bug. Will look at fixing it shortly.

[intelligence]

Any luck with this? I noticed this as well and haven't been able to get around it.

[lbineau]

Same here. For me it is a blocking issue because I can't track events.

[bakura10]

Hi !

Same issue here. I'm trying to add an event on play in order to stop a slideshow from rotating. Unfortunately it does not work on iPhone so whenever the video starts, it rotates to next slide.

Any workaround ? :)

[lbineau]

I used native events waiting for a fix.

[so-rose]

Same issue here. Relevant to this, the responsive design of my site (with the responsively embedded Plyr videos) seems to also be ignored because iOS insists on using its own huge, native player (It's my portfolio, so I need to have the 1080p video there) - https://sofusrose.com/portfolio .

Any ideas?

[sampotts]

I have it in my notes to fix this in the next major release (which will be soon). Sorry for the delay.

[TungXuan]

I have the same issues :((

[axelboc]

In case someone else needs a work-around, here is mine:

const [player] = plyr.setup(...);

if (window.YT) {
  ytReady();
} else {
  window.onYouTubeReadyCallbacks = window.onYouTubeReadyCallbacks || [];
  window.onYouTubeReadyCallbacks.push(ytReady);
}

function ytReady() {
  const embed = player.getEmbed();

  // Do whatever you want with the YT embed https://developers.google.com/youtube/iframe_api_reference
  embed.addEventListener('onStateChange', (evt) => {
    if (evt.data === window.YT.PlayerState.ENDED) { ... }
  }
}

The purpose of this code is to access the underlying YouTube embed instance. It's a bit convoluted for two reasons:

• player.getEmbed() doesn't return anything until the YT API has loaded and the player is ready
• player.on('ready') doesn't work as per this issue.

[ThreadPitt]

Hi, since this is still open it isn't fixed yet? I'm also trying to get it work with no success...

[lgmnemesis]

Same here. I think this is a critical issue for a lot of users. when can we see it fixed?

[sampotts]

Everything's critical depending on who you ask 👍

It's coming. I've been doing a lot of work on v3 which has tons of bug fixes in and improvements. I can't give a firm date but I'm in a testing and optimisation kinda phase at the moment.

[lgmnemesis]

Thanks for the quick response, I appreciate it. looking forward for v3

[samhibberd]

Hey @sampotts, great to hear v3 is underway, have you got any idea of when it might be ready for production?

We have added plyr support for Wistia to our version, is this something that will be baked into v3? Or something that we will need to write again? We have a client who is currently using plyr as their main player and our video tracking is impacted by this bug specifically. If it's not something that will be addressed imminently then we may need to look for alternative's until its ready.

No pressure, just need to know so we can get a plan in place, would much rather keep using Plyr, because its awesome!

Thanks

[sampotts]

I'm in the testing + fixing phase now so it's mostly done but of course I keep finding things as I go. We're into the Christmas period as well which doesn't help (I'm in the UK at the moment with family). I'm hoping to get it out in January.

Wistia support has been requested a lot and is in the list. I really want to make a plugin framework so that things like Wistia, YouTube and Vimeo can become addons rather than core functionality as not everyone needs them. I'd like to tackle this first as potentially it could speed up development of features etc since I wouldn't have to be doing it all and it'd open it up a little more and cut down the size of JS and CSS required.

[drpiou]

same here, and this is really anoying

[sampotts]

Closing this one as I think it's fixed but feel free to re-open if not solved in v3 👍