Plyr: Not working on IE11

Created on 12 Apr 2018 · 12Comments · Source: sampotts/plyr

After the last update (3.1.0) the plugin does not work in IE11.

I think it's because of Babel.

Source

adrigm

Most helpful comment

This solved it for me

In IE (v. 10 and v. 11) I had the error:

Object doesn't support property or method 'find'

I tried using polyfill.io, - but I could figure out, which package I needed or how (or where) I was supposed to inject that polyfill.

Then I realized that the polyfilled version is shipped with plyr (if you install it using NPM). So if you use Webpack, then you can replace:

import Plyr from 'plyr';

with...

import Plyr from 'plyr/dist/plyr.polyfilled.js';

... then that should do the trick.

zethzeth on 28 Jul 2019

❤7

All 12 comments

This is likely an implementation issue. Plyr 3.1.0 works great in IE11.

Make sure you are using the polyfilled version (https://cdn.plyr.io/3.1.0/plyr.polyfilled.js) or are using polyfill.io as documented.

friday on 12 Apr 2018

Hello,

This has changed since the last version. Thanks for the help.

adrigm on 12 Apr 2018

👍2

Yes indeed. It was mentioned in the changelog upgrade instructions :)

friday on 12 Apr 2018

Hello,

I still have problems running plyr 3.3.12 with IE 11. IE 11 only shows standard HTML5 video player. Firefox is fine showing the plyr.

I have changed my java script from
<script src="https://cdn.plyr.io/3.3.12/plyr.js" crossorigin="anonymous"></script>
to
<script src="https://cdn.plyr.io/3.3.12/plyr.polyfilled.js" crossorigin="anonymous"></script>
with no effect in IE 11 and firefox always shows the settings menu.

After that, I tried the solution used in the demo:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,Object.entries,Object.values,URL" crossorigin="anonymous"></script>
<script src="https://cdn.plyr.io/3.3.12/plyr.js" crossorigin="anonymous"></script>
<script src="https://cdn.plyr.io/3.3.12/demo.js" crossorigin="anonymous"></script>

This works in firefox and IE 11, but IE 11 sometimes tries to show some advertisement I do not want. Maybe it comes through demo.js. But deleting the call of demo.js gets me back to the problem with IE 11 - no plyr.

What is my mistake?

Thanks a lot.
Michael

MichaGue on 14 Jun 2018

@MichaGue Please read and follow the guidelines and, then use the templates to get started. They should work in IE.

friday on 14 Jun 2018

Hi friday,

thanks for your reply. I have tested the codpen version in IE 11 and it works. After that, I have copied the code from codepen in a local html file and added the sources for js and css and some local video files. Firefox, Chrome and Edge are working. IE 11 not. Sorry, but I am to knew to this to see my mistake. Maybe you have hint for me. Thanks a lot.

Michael

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test Plyr</title>
    <link rel="stylesheet" href="css/plyr.css">
    <script src="https://cdn.plyr.io/3.3.12/plyr.polyfilled.js"></script>
    <style>
    .container {
        margin: 50px auto;
        max-width: 500px;
    }
    </style>
</head>

<body>
    <div class="container">
        <video controls playsinline poster="poster.jpg" id="player">
            <source src="360.mp4" type="video/mp4" size="360">
            <source src="720.mp4" type="video/mp4" size="720">
            <source src="1080.mp4" type="video/mp4" size="1080">
        </video>
    </div>

    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', () => { 
      // This is the bare minimum JavaScript. You can opt to pass no arguments to setup.
      const player = new Plyr('#player');
    });

    // Expose player so it can be used from the console
    window.player = player;

    </script>
</body>
</html>

MichaGue on 14 Jun 2018

@MichaGue This is not the place for support questions. Please follow the instructions in the document I linked to.

friday on 14 Jun 2018

👎2

This solved it for me

In IE (v. 10 and v. 11) I had the error:

Object doesn't support property or method 'find'

I tried using polyfill.io, - but I could figure out, which package I needed or how (or where) I was supposed to inject that polyfill.

Then I realized that the polyfilled version is shipped with plyr (if you install it using NPM). So if you use Webpack, then you can replace:

import Plyr from 'plyr';

with...

import Plyr from 'plyr/dist/plyr.polyfilled.js';

... then that should do the trick.

zethzeth on 28 Jul 2019

❤7

Issue shouldn't be closed, still not working in IE11. Polyfills, babel, and suggestions here have not worked when using multiple plyr elements. Syntax error with "=>" among others. Would suggest using other resources if support for IE11 is important to you.

zakickes on 29 Aug 2019

It's closed because it's not Plyr's responsibility to provide polyfilling or transpiling for every scenario. We can only transpile _our_ code after all. It should be managed in your own project as every project's needs are different. I'd suggest reading up on polyfilling and transpiling - you'll need it elsewhere if you want to support IE11.

It's in use on many many production websites, working with IE11. I'd suggest doing some more research. Don't blame Plyr for your lack of research.

Tip: => is arrow syntax that isn't compatible with IE11 so you haven't setup babel correctly. Yes, it's tough but supporting IE11 is painful for every modern JS project. It's not an issue isolated to Plyr.

sampotts on 29 Aug 2019

Thanks for a response. I understand that I'm the lowest common denominator in this situation, and I understand what you are saying to me. As a novice seeing "Plyr is a simple, lightweight, accessible" followed by "Support for IE11*" is confusing, as nothing about IE11 integration is simple or accessible.

As far as babble goes, I understand what you mean, and I did that. Every time I fix something, I get another syntax error and polyfills do not seem to fix it easily.

Yes I know its possible, yes I know I'm doing it wrong, but I also know IE11 is not _really_ supported out of the box and I would have potentially used something in place of Plyr if I understood this from the beginning.

Merely asking some of this info is made more accessible and simplified so those like me understand Plyr is in no way made for IE11. Almost all JS from the readme is deemed useless once you try your site on IE11.

I will add it seems that it works on Edge, so It's IE11's fault, not plyrs, but maybe remove support?

zakickes on 29 Aug 2019

👍1

The newest version doesn't work in IE 11 also when using the plyr.polyfilled.js or polyfill.io. The problem is the usage of css variables (custom properties). There is a polyfill ie11-custom-properties, but it doesn't work with plyr together due how the migrateStyles function works.

I would see two solutions:

Officially support the ie11-custom-properties polyfill and change the migrateStylesfunction to also look for -ie-plyr-*properties that the polyfill sets
Generate a plyr.polyfilled.css file, where the css var() are replaced (probably easier and more straight forward)

@sampotts Let me know what you think, I can also add a pull request if you want, to either solution.