Issue with requireJS and plyr.js

[Yohannento]

Hello,

I'am trying during few days to add plyr.js (https://github.com/sampotts/plyr) in magento 2.2.6. in order to change default HTML5 audio player. I have added the following lines in my theme requirejs-config.js :

var config = {
    paths: {
        plyr: 'js/plyr',
    },
 };

I have added the plyr.js file in my theme web/js folder (the file is the same as https://cdn.plyr.io/3.5.10/plyr.js) and the following lines in my theme layout default.xml :

      <referenceContainer name="before.body.end">
        <block class="Magento\Framework\View\Element\Template" name="plyr" template="Magento_Theme::html/plyr.phtml" />
      </referenceContainer>

And in my theme template/html folder the file plyr.phtml :

<script>
const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));
</script>

I have an error in Firefox console  "Plyr is not defined". The plyr.js file is correctly loaded in firefox network tab (return 200). 

Is someone can help me please ?

Best regards,

[vishi_gulati · Accepted solution]

Hello @Yohannento ,

In your require please include your file as

var config = {
    paths: {            
            'plyr': "js/plyr"
        },   
    shim: {
        'plyr': {
            deps: ['jquery']
        }
    }
};

In default.xml, same as your:

<referenceContainer name="before.body.end">
        <block class="Magento\Framework\View\Element\Template" name="plyr" template="Magento_Theme::html/plyr.phtml" />
</referenceContainer>

In your phtml:

<script>
    require([
        'jquery',
        'plyr'
        ], function () {
            'use strict';
            //Your Code Here
    });
</script>

Hope this will help you to solve your issue.

If this helps you, please accept it as solution and give kudos.

Regards.

[Yohannento]

Hello @vishi_gulati ,

Many thanks for your reply, I tested your solution but I have again the error message "ReferenceError: Plyr is not defined" in the console. I have a warning after this message, the warning is "Erreur dans les liens source : Error: request failed with status 404 URL de la ressource : https://example.com/pub/static/frontend/brand/theme/fr_FR/js/plyr.js URL du lien source : plyr.js.map". This warning seems to indicate that the file plyr.js is loaded after the execution of code :

<script>
    require([
        'jquery',
        'plyr'
        ], function () {
            'use strict';
            const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));
    });
</script>

I think that's why the Plyr is not defined, do you know how to load the file plyr.js before the code execution ?

[Yohannento · Accepted solution]

Hello @vishi_gulati ,

I was wrong in my precedent post, the order of js file load and code execution is correct. The problem seems to come from the integration of plyr.js. Maybe plyr.js is not compatible with require-js. I will check with plyrs.js support.
Many thanks for your help !