Drupal.js conflict creates need to re-include jquery

I think you've got something weird going on with your site because putting two copies of jQuery on the page is never the solution... Did you figure this out in the last month?

Hi Everyone, I'm having problems using MediaElement with the jquery-mobile-1.0.1 library in Drupal 7.14. Basically I believe some javascript files are in conflict. If I remove the jquery-mobile library folder, the media player displays fine. But if the jquery-mobile library is present, the media player first loads as an html5 player and then I have to refresh for it to display with the styles but it still doesn't look right. I'm just starting to work with Drupal so any help here is much appreciated.

Thanks!

Hello, Any ideas on the conflict I described above? Does it have to do with the order in which the library .js files are loaded? Thank you in advance!

It seems that there is a bug in the latest MediaElement.js (2.9.1): If you search for $.each in mediaelement-and-player.min.js and replace that with jQuery.each, it works.

Thanks, #5 worked for me!

Thanks @gnoddep

This is indeed a bug in MediaElement.js. There is a single place where $ is used without properly protecting it against conflicts, i.e. using jQuery or encapsulating it in (function($){...})(jQuery).

I fixed the bug and submitted a pull request on GitHub. Hopefully this gets patched soon. In the meantime, you can use my branch of MediaElement.js, which incorporates this fix and is currently working for me in Drupal.

I can confirm #5 worked for me as well. Thanks @gnoddep!

I have the problem to use colorbox to load the video content in pop up window, the control bar position is totally off, the control like caption, time position all not display correctly. The individual node view of the video content itself display just fine though...

I used firebug to inspect on the element property, this is the result when using colorbox, the height became 0px.
div class="mejs-captions-selector" style="height: 0px; visibility: hidden;

This is the result when display the node by itself, the height is: 65px, which is correct.
div class="mejs-captions-selector" style="height: 65px; visibility: hidden;

@eusonic, I tried your version of mediaelement, but still having the same problem. Perhaps that the conflict problem still persist? Are you (or anyone) able to show the video in colorbox just fine?

Thanks.

@iadefy,

The problem you are describing with Colorbox is not related to this bug. The fact that the video works on nodes means my version of MediaElement.js is working. You should look for a more relevant issue thread, or open a new one.

Here's a good place to start: #1373724: Colorbox Support

#5 worked for me too.

#5 will indeed fix the problem, but it's a little heavy-handed. There is only one instance of $.each that actually needs to be replaced. What we really need is for the owner of MediaElement.js to fix the conflict. That's what my pull request on GitHub does, but it hasn't been committed.

If anyone can verify that my patched version of MediaElement is working (see #7), then comment on the pull request, that should hopefully get his attention.

I am now using library version 2.9.0 and seems to work much better.

@eusonic I am using your branch and it fixed all my problems! Thanks

re: #7

@eusonic, thanks - I came to the same conclusion.

To shed a little further light: drupal.js reveals this bug because it runs jQuery.noConflict() first thing, which removes the $ variable from being defined in the global scope. Then the one case in mediaelement-and-player.js which attempts to use $.each() (line 1049 in the uncompressed version) without wrapping/re-mapping it ends up choking.

My pull request has been merged into the main MediaElement branch, so this issue should be resolved.

Can anyone test the main branch (https://github.com/johndyer/mediaelement) and verify that it works?

-Cameron

Hey eusonic, where did you post the pull request? Couldn't found it in the Pull Requests section. Also didn't found it in the issues. And the mediaelement.js doesn't contains jQuery so it isn't implemented yet:

• mediaelement.js from master branch
• mediaelement.js from development branch

Yannick

My pull request is there. Check the closed requests. Here it is: https://github.com/johndyer/mediaelement/pull/570

My fix doesn't use the jQuery variable. It uses mejs.$, which is an alias for jQuery used throughout the plugin.

Also, this module actually uses mediaelement-and-player.js (technically, the minified version of this file). The fix can be seen at line 1049.

I believe this bug has been resolved. It's working for me. Can anyone else verify that the main mediaelement branch on GitHub works?

-Cameron

Really cool, works fine. I didn't see your previous link in your comment to the pull request. I think we can mark this issue as fixed! Thank you guys.