Plyr: The cdn version of Vimeo's player.js is not appropriate for a <script> tag on a require.js-using site

[JodiWarren]

• [ ] Issue does not already exist
• [ ] Issue observed on https://plyr.io

Expected behaviour

Vimeo videos should play correctly

Actual behaviour

A Mismatched Anonymous Define Modules error fires. More info on that error: http://requirejs.org/docs/errors.html#mismatch

Basically, the UMD in player.js is simply not necessary for embedding via a script tag.

Environment

• Browser: Chrome
• Version: 54
• Operating System: OSX
• Version: 10.11.16

Steps to reproduce

• Use Plyr.js on a site which uses require.js and load a Vimeo video.

[sampotts]

Might be worth raising this over at the player.js repo?
https://github.com/vimeo/player.js

[JodiWarren]

@SamPotts I've raised the above pull request for this issue. I'm not sure that that Vimeo would alter the CND'd version of their player.js for this. I think it could be related to this issue though: https://github.com/vimeo/player.js/issues/36

I've implemented the above PR on a couple of Magento 2 sites, which heavily use require.js, and it thoroughly fixes the mentioned issue.

[JodiWarren]

Here's a Codepen which kind of clumsily illustrates the issue: http://codepen.io/jodi/pen/ObMjbM?editors=1010

[JodiWarren]

FWIW I've opened an issue on Vimeo's repo too: https://github.com/vimeo/player.js/issues/79

Sorry for the issue spam!

[pgoforth]

This issue can be alleviated with a fix in the 'vimeoTimer' callback interval by checking for require and then load the CDN version using require if it's available:

var vimeoTimer = window.setInterval(function() {
    if (_is.object(window.Vimeo)) {
        window.clearInterval(vimeoTimer);
        _vimeoReady(mediaId, container);
    } else if ("function" == typeof define && define.amd) {
        require([
            config.urls.vimeo.api
        ], function(player){
            window.Vimeo = { Player: player };
            _vimeoReady(mediaId, container);
        });
        window.clearInterval(vimeoTimer);
    }
}, 50);

[friday]

If someone has issues with this (I'm not using require.js myself), a PR with an alternative method to load the URL is welcome. For example, you could detect if require.js exists globally and use it to load the URL instead of loadjs, like the solution above but in Plyr instead of a workaround.