When big pipe is enabled all the video media elements appear to have been loaded correctly, but will not play. This is related to 🐛 Big Pipe calls attachBehaviors twice Closed: works as designed , but still an issue even with all proper uses of the once() library.
Currently the once selector is using:
$(once('mediaelement', '.mediaelementjs', context))
The target is essentially something like<video class="mediaelementjs"> (simplified of course). The actual mediaelement library then creates wrapper html around that original tag, and, copies the classes from it.
We then end up with something like:
<div id="mep_0" class="mejs__container mejs__container-keyboard-inactive mediaelementjs media-player--inline mejs__video" tabindex="0" role="application" aria-label="Video Player" style="min-width: 319px;">
<div class="mejs__inner">
<div class="mejs__mediaelement">
<mediaelementwrapper id="mejs_someid">
<video width="640" height="480" preload="none" data-media-id="1234" data-mejsembed="1234" class="mediaelementjs media-player--inline" data-once="mediaelement" id="id1234" src="any_source">
What's happening then is big pipe is re-executing the behaviors. The 'data-once' has been applied to the , but it hasn't been applied to the new
The simplest solution would be just to ensure our selector doesn't select the mediaelement generated element, which seems to be identified by '.mejs_container'.
.mediaelementjs:not(.mejs__container)
Active
2.0
Code
Updated the approach to be a bit more logical. Using "audio.mediaelementjs,video.mediaelementjs"