Plyr: IE11 Issues

[klpatle]

Hello!

While working on platform compatibility issues I've found two problems with plyr using methods not supported by IE 11. One is Array.find() (line 1686 in plyr.js) and the other is new CustomEvent() (line 1361 in plyr.js)

These fail upon loading the script.

I've had to revert to polyfill methods for support.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent

Keep up the great work!
Atle

[friday]

This is documented on the github page.

[sampotts]

As noted this is documented but thanks!

[klpatle]

Whoops... I did search, but I missed it since I found a ✓ after IE11 support, with no footnote, and therefore wrongly concluded I had searched properly before posting.

I see the polyfill section mentions the demo

The easiest method I've found is to use polyfill.io which provides polyfills based on user agent. This is the method the demo uses.

The demo is actually not working properly on IE11. The video cannot be paused, and the "play" symbol in the middle of the video doesn't go away after starting the video. I don't have a play symbol on the video, but play and pause works fine for me.

[sampotts]

All good. I'll make it clearer. The other issues you raise with IE11 definitely need looking at though.

[friday]

I tried to replicate the issue by copying the settings argument from the demo to my testing server, but it's still not happening there (possibly because I can't actually use Sams publisherId for the ads).

So this doesn't seem to be happening in IE11 in general, but rather with the demo configuration.

[stenvdb]

If anyone else has issues with this, for me to get it working in IE11 I also had to polyfill the URL interface aside from what has already been mentioned. I used this polyfill.

[friday]

I've done some testing:

Since 3.1.0:

• Issue running multiple plyr instances
• The controls don't show on hover (for html5 video with source elements)

Since 3.2.0

• Big play button isn't hidden (for html5 video with source elements)
• Click to play doesn't work (for html5 video with source elements)

Most of the issues happen only if you use the <source> element rather than src property on the video element. So only for vanilla html5 video (no streaming).

Replication

http://jsbin.com/fibowawaju/1/edit?html,js,output shows all these issues.

• Change the plyr version in the cdn links to v3.0.6 for both the js and css to make both videos work or 3.1.0 to make some of it work again.
• Remove the first video to make the second work for 3.1.0+

[notrealdev]

This polyfill work for me on IE 11, thanks @friday

https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,Object.entries,Object.values,URL

[friday]

Plyr should be fully working in IE11 again in v3.3.9 (just released). Make sure you have added the URL polyfill, like in the link above ^ if you are still getting issue.