MediaElement Player style breaks for logged in users

Confirming this issue with the 2.x-dev branch as well. Drupal 9.5.10, PHP 8.2.5

Steps to reproduce: install module, set mediaelement as the formatter for the (video) view field, log in and visit any page with a video.

The version of the previously posted fix I opted for is somewhat different, and I cannot tell you why it works - or, in fact, *if* it works (or simply breaks something invisible to me). However, I can confirm that the prior fix did break the rendering for logged in users, causing a fallback to the browser's native player...and whatever I've managed, despite fairly thorough testing, doesn't seem to have broken anything.

As far as I can tell, '.mediaelementjs' in the original code is the culprit. For reasons that are unclear to me, but perhaps have to do with how the containers are classed, replacing this with 'mediaelementjs' fixed the issue entirely. When the issue is present, for logged in users (and *only* logged in users) the div "mejs__layers mejs__overlay mejs__overlay-play" renders 3-4 separate times, causing the video to be nonfunctional and show the overlapping in the pictures above.

From my limited understanding, this is likely because Drupal produces additional script calls to verify a user's logged-in status and check access permissions, and for some reason Drupal/once is failing to append "data-once" in a way that prevents those calls from re-triggering the bundle script every time this happens.

I also removed what I believe to be a redundant "attach," but I'll freely admit that about a half-hour of A/B testing showed no functional difference with or without that.

My "fix":

'use strict';

(function (Drupal, $, once) {
  Drupal.behaviors.mediaelement = {
    attach: function (context, settings) {
      $(once('mediaelement', 'mediaelementjs', context)).each(function () {
        $(this).mediaelementplayer(settings.mediaelement);
      });

      // Attach player to other elements if MediaElement.js is set to global.
      if (settings.mediaelement.attachSitewide !== undefined) {
        $(once('mediaelement', 'audio,video', context)).each(function () {
          $(this).mediaelementplayer(settings.mediaelement);
        });
      }
    }
  };
})(Drupal, jQuery, once);

Hope this helps in some way.

Hello,

We need to use video.mediaelementjs or audio.mediaelementjs instead of .mediaelementjs.
It will fix duplication also on ajax requests.

@kalavan is correct.

I have updated the to 2.0.0, still having the same problem. I see @shadowwolf218 recommendation is implemented, but its not working for me. The main reason is that, in the player, ".mediaelementjs" referenced multiple times, that breaks the player.

So I have created a patch for it.

And again I am using 4.2.x version of the player. Currently its 7.0.x. Using this patch the player is working, but there is a change after 4.2.x, the location of mejs-controls.svg file, its now in configuration. Using 7.0 player version, console shows its missing, as a result the main play button is missing. For that, I think path of mejs-controls.svg need to provide, which actually can be done through standalone call.

iconSprite: 'mejs-controls.svg'