Upgrade MediaElement to 4.X

[rafa8626]

The latest version of MediaElement (3.0.2 by the end of the week) has covered many new media types. But there are things that need to be updated on your side to make it work:

1. Remove prior files and include new files inside wp-includes/js/mediaelement folder
2. On wp-includes/js/mediaelement/wp-mediaelement.js:
   1. Remove lines related to Silverlight (since it’s no longer supported)
   2. Change line if ('flash' === mejs.pluginType) to if (mejs.rendererName.match(/flash/gi) !== null)
   3. Add in the player settings classPrefix: 'mejs-' to support prior class styles, since now uses BEM naming convention.
   4. Replace wp-includes/js/mediaelement/wp-mediaelement.min.js with changes specified above.
3. Modify wp-includes/script-loader.php to update the reference to MediaElementJS changing lines:
   1. $scripts->add( 'mediaelement', "/wp-includes/js/mediaelement/mediaelement-and-player.min.js", array('jquery'), '3.0.0', 1 );
   2. $styles->add( 'mediaelement', "/wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css", array(), '3.0.0');
   3. Translations provided in mejsL10n; refer to ​https://github.com/johndyer/mediaelement/blob/master/src/js/languages/en.js to see new format and whole list of translations
4. It’s worth to expand your Embeds code to use MediaElementJS to support new formats such as HLS, M(PEG)-DASH, YouTube, Vimeo, SoundCloud, Facebook and DailyMotion.

[ocean90]

#38340 was marked as a duplicate.

[rafa8626]

Just FYI, version 3.0.2 is now available. Thanks

[rafa8626]

As an FYI, version 3.1.0 will be available on Feb 2, 2017 so please update to that one, please.

[bduclos]

Version 4.0.3 has been released ​https://github.com/mediaelement/mediaelement/blob/master/changelog.md
The current version in WordPress (2.22.0) has a lot of bugs.
Do you plan an upgrade for the next WP minor release?

[swissspidy]

2.22.0 to 4.0.3 is huge bump. We need to make sure everything still works as expected.

[Plastikschnitzer]

Hi, I discovered that the latest iOS and Mac OS version with Safari are not able to play audio files with mediaelement.js player any more. All other operating systems and browsers (Windows, Linux, Mac with all other major browsers) are still working, a quick fix would be perfect ;-)

[rafa8626]

@Plastikschnitzer Were you using the 4.0.4 version of the 2.22.0 version of mediaelement.js?

[Plastikschnitzer]

Sorry for being unclear here, I was using the mediaelement.js from wp 4.7.3, my developer said its version 2.22.0 of mediaelement.js and he told me this should be updated asap.
So I searched a bit and found this ticked and saw that its already planned but I was not sure if you are aware of the fact that the version which is shipped in Wordpress core 4.7.3 does not work for iOS/Mac OS latest version and Safari – which are a lot of users (and I am wondering that there are no other people writing about it online).

[grosbouff]

Hi, will this be supported soon ?
The fix to make it work is quite a mess.
Thanks a lot.

​https://github.com/mediaelement/mediaelement/blob/master/docs/installation.md#wordpress

[grosbouff]

patch for mediaElement.js (4.0.7)

[grosbouff]

I made a patch (for MediaElement.js 4.0.7) based on the official MediaElement guide, it is attached to the ticket.

​https://github.com/mediaelement/mediaelement/blob/master/docs/installation.md#wordpress

[azaozz]

Looking at mediaElement.js.4.0.7.diff:

• Adding new file types/extensions (m3u8 and mpd) to WordPress is not part of updating MediaElement.js and needs its own ticket. Also not sure how "safe" these are.
• Same for the changes to wp_get_audio_extensions(). They seem to be out of scope here and will need separate ticket if warranted.
• Don't think we need to translate the languages names specifically. Instead will need to add the WordPress translations to ME.js.
• mejs.rendererName.match(/flash/gi) !== null is probably better as /flash/i.test( mejs.rendererName ).

[grosbouff]

Don't think we need to translate the languages names specifically. Instead will need to add the WordPress translations to ME.js.

I'm not sure of it (I just followed their guide), but I think the translations (at least, the JS variables) are required by the MediaElement.js library.

Can I help for this ? I would really appreciate the library upgrade in an upcoming release of WP...

[grosbouff]

Here's another shot without modifications to wp_check_filetype(), wp_get_mime_types(), wp_get_ext_types() wp_get_audio_extensions(), wp_get_video_extensions() and wp_audio_shortcode().

[Presskopp]

4.1.0 (2017/05/04) is out, 4.1.1 in progress..

[desrosj]

Needs a patch refresh for 4.1.x.

[jbpaul17]

If the refresh and testing can finish by Friday, May 12th then we can look to bring it back to the 4.8 milestone.

[timmydcrawford]

Wanted to note here that during testing of the media widgets, a bug in the current version of MediaElement was hit:

​https://github.com/xwp/wp-core-media-widgets/issues/130

Currently the bug causes YouTube videos to loop even when the wp_video_shortcode has loop set to false.

[grosbouff]

just to be sure

[rafa8626]

Can you show me how are you getting the issue, please?

[rafa8626]

Or a sandbox where I can see the issue, and assist you to fix this as well?

[rafa8626]

Also, I think this issue is on version 2.x if I'm not mistaken. Please correct me if that's true

[grosbouff]

@rafa8626 :

You can see it in action here : ​http://bit.ly/2p6XH3K - 4.1.0.
BTW, it seems that something (player css styles) does not load.
Could you help me find what ?

[rafa8626]

@grosbouff In the player configuration, use classPrefix: 'mejs-' so we don't break any of the existing themes in WordPress. Try that and I'll check the other issue

[grosbouff]

Replying to rafa8626:

@grosbouff In the player configuration, use classPrefix: 'mejs-' so we don't break any of the existing themes in WordPress. Try that and I'll check the other issue

great, it's working !

[rafa8626]

@grosbouff Great news! Just to confirm: the issue that @timmydcrawford was talking about is also fixed? Or that's a different issue?

[grosbouff]

I don't know about that one. Maybe you should ask in the related ticket : ​https://github.com/xwp/wp-core-media-widgets/issues/130

[timmydcrawford]

Sorry for not adding some detailed instructions to my prior report. The issue we are experiencing is related to the current version of mediaelement which in trunk appears to be 2.22.0 - at least that is what is output when I type mejs.version in the browser console.

The Media Video Widget uses wp_video_shortcode, which for a YouTube video url, outputs the following in the DOM:

<div style="width:100%;" class="wp-video"><video class="wp-video-shortcode" id="video-1-6" preload="metadata" controls="controls">
<source type="video/youtube" src="https://www.youtube.com/watch?v=b5Qh72h8vkk&#038;_=6" /><a href="https://www.youtube.com/watch?v=b5Qh72h8vkk">https://www.youtube.com/watch?v=b5Qh72h8vkk</a></video>
</div>

From there mejs takes over. The corresponding mejs bug is detailed here ​https://github.com/mediaelement/mediaelement/issues/1851 and was fixed subsequently in ​https://github.com/instructure/mediaelement/pull/17. The bug fix was released in version 2.23.2 per ​https://github.com/instructure/mediaelement/blob/master/changelog.md

To see the bug happen, take the HTML above which is output from wp_video_shortcode, and drop it into a text widget on a site running trunk. Then view the output widget, click play - let it play to the end, and note that the video loops. I attempted to fix by adding a loop=0 to the embed url, which YouTube supports, but the bug is in medialement itself it seems.

Let me know if I can provide any more details

[rafa8626]

@timmydcrawford Does this mean that this issue that is in 2.22.0 version needs to be fixed in order to upgrade to 4.1.0? Or am I missing something? I'd be happy to assist with this, but I'm failing to see how is this gonna help for the upgrade

[rafa8626]

@grosbouff's latest patch should work as expected.

[rafa8626]

@grosbouff Where did you set _wpmejsSettings? That's the last thing missing in the patch to work globally, since there it needs to include the classPrefix: 'mejs-' configuration, but I can't find it. If you can just add that to the latest patch you submitted this should be good

[grosbouff]

@rafa8626
sorry, I don't understand everything about all that stuff yet.
Can you explain this ?
Where should I put it and using which values ?
I just followed the guide here : ​https://github.com/mediaelement/mediaelement/blob/master/docs/installation.md#wordpress
and it's working for me that way.

Please be more explicit about this :)

We're almost there !

[rafa8626]

@grosbouff Just add this line on the patch after the translations; I finally found it:

$scripts->add( 'wp-mediaelement', "/wp-includes/js/mediaelement/wp-mediaelement$suffix.js", array('mediaelement'), false, 1 );
$mejs_settings = array(

'pluginPath' => includes_url( 'js/mediaelement/', 'relative' ),
'classPrefix' => 'mejs-', This will be a global element that will help all the themes

);

[grosbouff]

Replying to rafa8626:

@grosbouff Just add this line on the patch after the translations

Ok, it's done in -v3 !

[rafa8626]

Fix for YouTube issue

[rafa8626]

@timmydcrawford I submitted an attachment with the files with the fix for YouTube's loop; let me know if you need anything else from me. I'll check if this is not an issue with 4.x and I'll fix it in that version if needed. Just let me know if this will help to upgrade the package soon

[rafa8626]

@timmydcrawford I've checked this on 4.1.0 version and there are not issues at all with this. Just an FYI

[timmydcrawford]

@rafa8626 thanks for looking into this and verifying it is fixed in 4.1 as well. @westonruter do you think we can just wait for the mejs upgrade to go through, or do we need to pursue patching the existing version, or upgrading on the 2.x branch for the video widget?

[westonruter]

@rafa8626 @timmydcrawford can the fix be supplied as a patch file please?

I don't have prior experience with upgrading ME.js in core, so I'm not familiar with the best protocol for upgrading vs patching.

[rafa8626]

@westonruter If you can indicate how to create a patch I'll do it. I don't have experience with these type of requests so any hints will be appreciated. Thanks

[grosbouff]

Can I help for this ? I know how to make a diff file but i'm not sure to understand what I have to do...

[rafa8626]

@grosbouff If you can just provide me the command you use for diff I can submit this as a diff file. Or are you using pure git diff command?

[rafa8626]

Nevermind I think I got it. I'll post the diff in a minute

[rafa8626]

@westonruter I have attached a diff file. I hope it works for you

[Plastikschnitzer]

Hi,

we did some further testing to my case above (current wp-stable release with mediaelement.js in version 2.22.0) with iOS 10 / Safari mobile devices and current stable Mac OS / Safari: Audio is working if the site has not https! If the site is running on https, its broken.

Can we make sure https and the OS/Browser mentioned above is working with this fix?
Someone already described the bug and built a fix inspired by youtubes way to come around the bug here: ​https://poodll.com/ios-10-and-html5-video-and-html5-audio-on-https-sites/

Best regards,
Plastikschnitzer

[rafa8626]

@Plastikschnitzer Certainly this workaround will be introduced in 4.1.1, but I don't know what's the next step in terms of maintaining the 2.22.0 version or moving forward with 4.1.1

[rafa8626]

@Plastikschnitzer I'll add the fix for 2.22.0 just to ensure that this will give confidence to move forward with 4.1.1

[Plastikschnitzer]

@rafa8626 thank you very much! Where can I get the fix, I would like to test it.

[rafa8626]

@Plastikschnitzer I'll submit both the fixed files and diff to make sure everybody's covered

[rafa8626]

@Plastikschnitzer It's ready you will find the zip file with the fixes; please test and let me know if it worked for you

[rafa8626]

@westonruter The final diff is called mejs-2.22.0-fixes and it includes the fix for YouTube and what @Plastikschnitzer indicated as a bug for iOS. Let me know if you need anything else

[Plastikschnitzer]

Thank you very much for your quick fix! I applied your patch and now its working on both iOS / mobile Safari and latest Mac OS / Safari with the website on https.

Thank you very much @rafa8626!

[rafa8626]

Thank you very much for your quick fix! I applied your patch and now its working on both iOS / mobile Safari and latest Mac OS / Safari with the website on https.

Thank you very much @rafa8626!

You are welcome! I'm glad it worked for you. @westonruter Any way I can help you with the MEJS upgrading?

[grosbouff]

Replying to jbpaul17:

If the refresh and testing can finish by Friday, May 12th then we can look to bring it back to the 4.8 milestone.

Ok guys, tomorrow is the deadline :) Is everything ready for it ?

[rafa8626]

@grosbouff Can you create a final diff file in which reflects this on the wp-includes/js/mediaelement/wp-mediaelement.js file, please?

Change

mejs.rendererName.match(/flash/gi) !== null

to

~mejs.rendererName.indexOf('flash')

[rafa8626]

Just FYI, 4.1.1 will be available next week.

[grosbouff]

@rafa8626 : I uploaded mediaElement.js.4.1.0-v4.diff.

The ONLY thing that changed since mediaElement.js.4.1.0-v3.diff is what you asked for in #61(https://core.trac.wordpress.org/ticket/39686#comment:61).

(I also did re-minify wp-mediaelement.js > wp-mediaelement.min.js using ​https://jscompress.com/)

Is everything OK with this and can we tell the WP team ?

[afercia]

Worth noting upgrading is also a matter of improved usability and accessibility. For example, when using the keyboard and tabbing through the player controls, once the last focusable control gets blurred, all the controls fade out:

While this makes sense when playing a video, it happens also when playing an audio file:

Controls get hidden offscreen, they're still focusable and actionable but visually completely hidden. This was resolved in MediaElement version 2.22.1 (WordPress currently uses 2.22.0) released on 2016/08/18, ​see changelog and ​see related pull request on GitHub.
Worth noting that the controls don't come back into view when tabbing backwards, it seems to me this happens also on the latest MediaElement version and it would be great if it could be fixed upstream. /cc @rafa8626 will create an issue on GH :)
I'd just like to note that not including the non-minified version in WordPress makes debugging this kind of things a bit hard.

[rafa8626]

@afercia The fix for Accessibility you mentioned above is ready to be released in the next version of MediaElement. Please confirm that it works so we can generate a new patch. @grosbouff Are you up for the task once 4.1.1 is released?

[grosbouff]

@rafa8626 no problems ! Team work !

[afercia]

Related: #27645 (closed in favour of this ticket).

[rafa8626]

@grosbouff 4.1.1 version has been released; however, @afercia pointed some accessibility issues that will be fixed on 4.1.2, that will be released by the end of next week. Also, if you download ​https://github.com/mediaelement/mediaelement/files/1009558/wp-mediaelement.zip it contains the latest version of the wp-mediaelement files with some minor formatting fixes. So let's create the new patch once 4.1.2 is released. Thanks

[swissspidy]

#40788 was marked as a duplicate.

[BackuPs]

@swissspidy

#40788 was marked as a duplicate. It looks like the reported issue was not understood correctly and I believe this was marked unfairly as duplicate as it is not a duplicate at all of this thread in here.

Its a new issue that #40788 reports. 1px border because of the mejs scripts wp is using and which will popup the moment the users start using the video widget in wp 4.8 in a sidebar. You can even see it in here at the screenshot @afercia added.

Even if the suggested modifications in this thread are applied that 1px issue will remain as long as wp does not update their MEJS scripts to the latest build 4.1.1 or above. Or adjust the mejs script wp is using according to the suggestion in this thread $40788

[swissspidy]

Even if the suggested modifications in this thread are applied that 1px issue will remain as long as wp does not update their MEJS scripts to the latest build 4.1.1 or above.

@BackuPs I'm sorry if I might have misunderstood you, but that's what this ticket is about: updating MEJS to the latest version. If a planned regular update also resolves that 1px border issue, that's even better.

[BackuPs]

@swissspidy

The milestone for fixing this is set at 4.8.1 whereas the new video widget is released at 4.8 And that has the 1px border issue as it using the old MEJS script. So the question i have: is the milestone gonna be changed to 4.8 to update to newer MEJS scripts? Or do we still have to live with that issue amongst the one reported above in this thread in wp 4.8?

Thanks !

[westonruter]

@grosbouff @rafa8626 The patch in mediaElement.js.4.1.0-v4.diff​ did not apply cleanly so I tried fixing it up as well as make some additional changes needed with the introduction of media widgets.

Note that source files in WP should not be re-minified and submitted as part of patches, since the WP build process takes care of that. The minified files generated as part of a ME.js build are different and should be included.

There is an error about mejs.rendererName not being defined in wp-mediaelement.js; this prevents all players from loading. Workaround in ​868a0c2.

There is a 404 for mejs-controls.svg. Added in ​e613b03.

I am noticing a few issues with the patch, perhaps in part to my refresh of the patch. The YouTube and Vimeo players are not working very well or not at all. I've added some screenshots here: ​https://github.com/xwp/wordpress-develop/pull/232#issuecomment-304347911

Please review and amend a ​pull request I opened as opposed to submitting patch files. That should make it easier to collaborate and review. You can either fork the repo and open a PR into the trac-39686 branch, or I can add you as contributors to that repo to push directly.

[rafa8626]

@westonruter If you want to add me as a contributor it will be fine; otherwise, I will submit a PR for this soon. Thanks for pointing these issues. Just FYI, version 4.1.2 has been released and accessibility issues have been addressed, as well as other fixes

[rafa8626]

@westonruter I have added my fixes to your PR. Let me know if I can assist you on anything else. Thanks

[westonruter]

Watchers: Please test. The patch can be tested via grunt patch:https://github.com/xwp/wordpress-develop/pull/232

[westonruter]

I'm still having trouble getting Vimeo to work (e.g. in the Video widget and the [video src="http://vimeo.com/..."] shortcode), but strangely only in Twenty Fifteen and Twenty Sixteen: the video is just blank, but I can hear the audio. It plays properly in Twenty Seventeen. The oEmbed video player plays properly, however.

[rafa8626]

@westonruter Let me check this and I'll report back

[rafa8626]

I installed Twenty Sixteen and I see Vimeo correctly. Also tested Twenty Fifteen. I used the Edit Post's text editor to use the shortcode. If there's anything I may be missing in my test please let me know.

Here are my screenshots:

[grosbouff]

I had a try too, works fine here.
​https://github.com/xwp/wordpress-develop/pull/232#issuecomment-306130387

[rafa8626]

@grosbouff @westonruter MEJS has been upgraded to 4.1.3 and it's now available in ​https://github.com/xwp/wordpress-develop/pull/232. Let me know if you need anything else

[westonruter]

This now needs wider testing.

Also, that last reference to Froogaloop does need to be removed, though we aren't sure the scenario where the code is invoked. It was introduced in [31016] for #29267. From reading the commit message, it seems it is supposed to be enqueued when adding a Vimeo to a post, but I can't reproduce that. @wonderboymusic do you recall?

[rafa8626]

@westonruter Certainly. I will remove that conditional since I don't think it's needed at this point, unless it is proven to be needed. I have tried different ways to reproduce this without success. I'll commit that change tomorrow. Just FYI, 4.1.3 fixed mostly documentation and some things for HLS. Nothing that will really be that different from 4.1.2 in this context

[westonruter]

In 40892:

Media: Restrict appending loop parameter to Vimeo URLs specifically and not all external URLs in Video widget (via shortcode).

Fixes issue where Video widgets embedding external files fail to get recognized due to the presence of the loop param after the video filename, even though it has a recognized extension. Regardless, the loop param is only present to fix a Vimeo issue in ME.js 2.x.

Props timmydcrawford.
Amends [40640].
See #39686, #39994.
Fixes #40977.

[grosbouff]

Hi guys !
So, it's not part of WP 4.8 ?
:/

[rafa8626]

@grosbouff I think it's indicated as 4.8.1; has anybody of the watchers has tested the branch and come up with issues? @westonruter Can this go to 4.8?

[westonruter]

No. 4.8 is already been released. It needs wider testing and review by the media component maintainers before it can be committed. It's also not completely certain that it could be part of a minor release like 4.8.1 since minor releases may have restrictions on adding new files.

[Plastikschnitzer]

The mediaelement-2.22.0 fixes @rafa8626 provided a month ago are not working any more in wp 4.8 with https and Safari on Mac OS 10.12.5 or mobile Safari on iOS 10.

Is there a chance to get at least a quick fix for the https issue, which is not fixed for many months now? I am still wondering why there are not more bug reports about it, are there still so few sites running on https?

[BackuPs]

@westonruter  Then why was the milestone set to 4.8.1 in a thread that is already 5 months old? Reported issues exist in the current media elements script that ships with wp 4.8. But WP does release new media widgets in which those reported issues are not fixed..... very frustrating i must say !

[rafa8626]

If we can make the core contributors and whoever maintains the Media component to review and test this, and if you watchers give thumbs up to merging the branch described above, we will be good. I haven't seen anybody but @westonruter and @grosbouff testing this and I have addressed all that I can right now. But there must be more proof that it is good to go, so I'd ask you your help to close the loop on this and at the same time fix the bugs all of you have stated. I can guarantee you that I'm proactive and this branch is stable. Just help with testing and indicate here and in the Slack channel that it is being tested and approved.

[westonruter]

Replying to BackuPs:

@westonruter  Then why was the milestone set to 4.8.1 in a thread that is already 5 months old? Reported issues exist in the current media elements script that ships with wp 4.8. But WP does release new media widgets in which those reported issues are not fixed..... very frustrating i must say !

Sorry you are frustrated. Issues get punted to future releases all the time when they miss the deadline for merge, when their patches are not completed and fully tested.

[rafa8626]

@westonruter Upgraded to 4.2.2 version on current repository. Any updates on this? How can help to expedite the testing of this so it can be merged?

[westonruter]

@rafa8626 I suggest raising in #core-media, getting component media maintainers involved in testing and reviewing the patch. Given the magnitude of the changes, and the presence of many new files (which complicate automatic upgrades), I expect that this will be something for the 4.9 major release and not the 4.8.1 minor release.

[rafa8626]

@westonruter Thanks. Who should I ping on the #core-media channel, since I've tried to indicate that this should be testing but I haven't had any success? I understand that this one is a major change but is a necessary one

[westonruter]

Yes, I absolutely agree it is a major yet necessary change. The four component maintainers are listed at ​https://make.wordpress.org/core/components/media/

[westonruter]

In 41054:

Media: Restrict appending loop parameter to Vimeo URLs specifically and not all external URLs in Video widget (via shortcode).

Fixes issue where Video widgets embedding external files fail to get recognized due to the presence of the loop param after the video filename, even though it has a recognized extension. Regardless, the loop param is only present to fix a Vimeo issue in ME.js 2.x.

Merges [40892] into the 4.8 branch.
Props timmydcrawford.
Amends [40640].
See #39686, #39994.
Fixes #40977 for 4.8.1.

[westonruter]

OK, I'll move to commit this.

[westonruter]

In 41198:

Media: Upgrade MediaElement.js from 2.22.0 to 4.2.3.

Props rafa8626, grosbouff, westonruter, azaozz, Plastikschnitzer for testing.
See #39686.

[westonruter]

OK, it's committed to trunk. I'm leaving this ticket open, however, because it needs more testing and there are surely going to be some follow-up commits.

[rafa8626]

@westonruter I released a new version that fixed issues for YouTube and improved the player, after some tests. Here's the PR: ​https://github.com/xwp/wordpress-develop/pull/246.
@grosbouff, @azaozz, @Plastikschnitzer, please review and test. Thanks

[westonruter]

In 41240:

Media: Upgrade MediaElement.js from 4.2.3 to 4.2.5.

Props rafa8626.
See #39686.

[westonruter]

In 41320:

Media: Upgrade MediaElement.js to 4.2.5-74e01a40 fixing missing mejs.MediaElement reference.

ALso fixes:

• Accessibility for volume control
• Progress bar tooltip positioning and dimensions correctly set for media with long duration
• Better codec checking
• Minor CSS fix to avoid flickering effect on volume control

Props rafa8626.
See #39686.
Fixes #41640.

[westonruter]

With [41320] I'll close this ticket. Any additional issues can be opened in new tickets.

[johnbillion]

This change is causing JavaScript errors on the post editing screen.

Uncaught TypeError: Language code must have format `xx` or `xx-xx`
    at Object.s.language (mediaelement-and-player.min.js?ver=4.2.5-74e01a40:12)
    at Object.o.5.15 (mediaelement-and-player.min.js?ver=4.2.5-74e01a40:12)
    at i (mediaelement-and-player.min.js?ver=4.2.5-74e01a40:12)
    at e (mediaelement-and-player.min.js?ver=4.2.5-74e01a40:12)
    at mediaelement-and-player.min.js?ver=4.2.5-74e01a40:12
s.language @ mediaelement-and-player.min.js?ver=4.2.5-74e01a40:12
o.5.15 @ mediaelement-and-player.min.js?ver=4.2.5-74e01a40:12
i @ mediaelement-and-player.min.js?ver=4.2.5-74e01a40:12
e @ mediaelement-and-player.min.js?ver=4.2.5-74e01a40:12
(anonymous) @ mediaelement-and-player.min.js?ver=4.2.5-74e01a40:12
wp-mediaelement.js?ver=4.9-alpha-40870-src:51

Uncaught TypeError: $(...).not(...).filter(...).mediaelementplayer is not a function
    at HTMLDocument.initialize (wp-mediaelement.js?ver=4.9-alpha-40870-src:51)
    at i (jquery.js?ver=1.12.4:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
    at Function.ready (jquery.js?ver=1.12.4:2)
    at HTMLDocument.K (jquery.js?ver=1.12.4:2)
initialize @ wp-mediaelement.js?ver=4.9-alpha-40870-src:51
i @ jquery.js?ver=1.12.4:2
fireWith @ jquery.js?ver=1.12.4:2
ready @ jquery.js?ver=1.12.4:2
K @ jquery.js?ver=1.12.4:2
wp-auth-check.js?ver=4.9-alpha-40870-src:101

Uncaught TypeError: Cannot read property 'hasClass' of undefined
    at HTMLDocument.<anonymous> (wp-auth-check.js?ver=4.9-alpha-40870-src:101)
    at HTMLDocument.dispatch (jquery.js?ver=1.12.4:3)
    at HTMLDocument.r.handle (jquery.js?ver=1.12.4:3)
    at Object.trigger (jquery.js?ver=1.12.4:3)
    at Object.jQuery.event.trigger (jquery-migrate.js?ver=1.4.1:633)
    at HTMLDocument.<anonymous> (jquery.js?ver=1.12.4:3)
    at Function.each (jquery.js?ver=1.12.4:2)
    at jQuery.fn.init.each (jquery.js?ver=1.12.4:2)
    at jQuery.fn.init.trigger (jquery.js?ver=1.12.4:3)
    at Object.<anonymous> (heartbeat.js?ver=4.9-alpha-40870-src:400)

Seen in Chrome 61 on macOS. Git bisected back to this commit.

[johnbillion]

Correction: The above JavaScript errors are seen when using the admin area in a language with a three-letter locale code, such as ​Moroccan Arabic.

[rafa8626]

Thanks @johnbillion . I'll prepare a PR to solve this. But can you create a separate ticket for this issue please? The overall task for this ticket was achieved already and now individual tickets should be created as @westonruter stated above

[johnbillion]

#42071

[ocean90]

Worth to mention that [41198] has also removed the froogaloop script which may be used by plugins/themes.

I guess this needs a dev note. @rafa8626 are you interested in writing a dev note (see ​examples) for the MediaElement update?

[rafa8626]

@ocean90 I could but I don't know where this needs to be written, given that I've only had worked with GitHub in order to get the upgrade work wrapped up.

[westonruter]

@rafa8626 you could write the dev note here as a comment on Trac and we could copy it to the ​Make/Core blog for you.

[jbpaul17]

@rafa8626 if you want to draft the dev note in whatever tool/format works best for you, then I can help get that reviewed and published to Make/Core. Let me know if that works for you, thanks!

[rafa8626]

@westonruter Thanks for the suggestion. @jbpaul17 here's my Dev Note:

MediaElement has been upgraded to 4.2.6, which includes, among lots of bug fixes:

* Removal of jQuery in its core to make it more portable
* UI with flexbox
* Improvements in controls Accessibility
* Stopped support for old browsers (supports IE11+, Chrome, FF, Safari, Android 4+ and iOS 8+)
* Upgraded YouTube and Vimeo renderers to use new APIs
  (for Vimeo, it uses now https://player.vimeo.com/api/player.js, since Froogaloop is now deprecated)

With this upgrade, a couple of things must be considered:
1. In order to create themes compatible with it, it is required to add 
    the classPrefix: 'mejs-' in the player configuration, since latest version of MEJS switched to 
    BEM naming convention, so make sure it is set correctly.
2. `player.options.mode` has been removed completely

[westonruter]

In 41877:

Media: Add MediaElement.js 2.2 back-compat for MediaElement.js 4.2

• Introduces mediaelement-migrate.js.
• Upgrades ME.js from 4.2.5-74e01a40 to 4.2.6-78496d1.

Props rafa8626, bradyvercher.
See #39686.
Fixes #42189.

[westonruter]

In 41886:

Widgets: Prevent MediaElement.js player from overflowing sidebar in Audio widget.

Props bradyvercher.
See #39686.
Fixes #42244.

[westonruter]

In 41889:

Media: Use user locale as ME.js language in admin and add mejsL10n inline script before mediaelement-core so WP-exported translation strings are used.

See #39686.
Fixes #42241.

[westonruter]

In 41891:

Media: Add missing mediaelement-migrate.js script to get uglified.

Amends [41877].
See #42189, #39686.

[jbpaul17]

@rafa8626 @melchoyce @westonruter drafted dev note per @rafa8626's text; please review/edit: ​https://make.wordpress.org/core/?p=23897&preview=1&_ppp=1c0e03e83a

[Plastikschnitzer]

I would add:

Support for iOS 10 and Mac OS on https-Websites added

We tested the latest nightly build of 4.9 and its working :-)

[rafa8626]

I'll add as a 3rd consideration (just to give the users reassurance that nothing is gonna break):

 3. Although jQuery was removed from the core package, a Mediaelement migration file has been included to provide full backward compatibility between themes and development of new features

The rest looks good to me

[jbpaul17]

Thanks @Plastikschnitzer and @rafa8626, I've added those items --> ​https://make.wordpress.org/core/?p=23897&preview=1&_ppp=07de112f5f.

@melchoyce @westonruter let me know if there's someone you'd like to review this before it's published... thanks!

[westonruter]

Replying to jbpaul17:

Thanks @Plastikschnitzer and @rafa8626, I've added those items --> ​https://make.wordpress.org/core/?p=23897&preview=1&_ppp=07de112f5f.

@melchoyce @westonruter let me know if there's someone you'd like to review this before it's published... thanks!

@bradyvercher Anything else you'd like to add? 👆

[westonruter]

In 42015:

Update $_old_files to add the deleted MediaElement.js files when it was upgraded from 2.22.0 to 4.2.3.

Amends [41198].
See #39686.
Fixes #42097.

[westonruter]

Dev note: ​https://make.wordpress.org/core/2017/10/30/mediaelement-upgrades-in-wordpress-4-9/

[Presskopp]

Lots of fixes in v4.2.7 (2017/11/17)