WordPress.org

Make WordPress Core

Opened 4 months ago

Last modified 34 hours ago

#39686 new enhancement

Upgrade MediaElement to 4.X

Reported by: rafa8626 Owned by:
Milestone: 4.8.1 Priority: normal
Severity: normal Version: 4.7.1
Component: External Libraries Keywords: has-patch
Focuses: accessibility, javascript Cc:

Description

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.

Attachments (10)

mediaElement.js.4.0.7.diff (571.5 KB) - added by grosbouff 4 weeks ago.
patch for mediaElement.js (4.0.7)
mediaElement.js.4.0.7-v2.diff (283.6 KB) - added by grosbouff 3 weeks ago.
mediaElement.js.4.1.0.diff (283.6 KB) - added by grosbouff 3 weeks ago.
mediaElement.js.4.1.0-v2.diff (283.6 KB) - added by grosbouff 3 weeks ago.
just to be sure
mediaElement.js.4.1.0-v3.diff (283.9 KB) - added by grosbouff 3 weeks ago.
youtube-fix.zip (104.9 KB) - added by rafa8626 2 weeks ago.
Fix for YouTube issue
youtube-fix.diff (211.1 KB) - added by rafa8626 2 weeks ago.
mejs-2.22.0-fixes.diff (328.0 KB) - added by rafa8626 2 weeks ago.
mejs-2.22.0-fixes.zip (132.5 KB) - added by rafa8626 2 weeks ago.
mediaElement.js.4.1.0-v4.diff (283.9 KB) - added by grosbouff 13 days ago.

Change History (83)

#1 @swissspidy
4 months ago

  • Component changed from Embeds to External Libraries
  • Keywords needs-patch added
  • Summary changed from Support MediaElementJS latest version to Upgrade MediaElement to 3.0.2
  • Type changed from feature request to enhancement

#2 @ocean90
4 months ago

#38340 was marked as a duplicate.

#3 @rafa8626
4 months ago

Just FYI, version 3.0.2 is now available. Thanks

#4 @rafa8626
4 months ago

  • Summary changed from Upgrade MediaElement to 3.0.2 to Upgrade MediaElement to 3.1.0

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

#5 @bduclos
7 weeks ago

  • Summary changed from Upgrade MediaElement to 3.1.0 to Upgrade MediaElement to 4.0.3

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?

#6 @swissspidy
6 weeks ago

  • Milestone changed from Awaiting Review to 4.7.5

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

#7 @Plastikschnitzer
6 weeks ago

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 ;-)

#8 @rafa8626
6 weeks ago

  • Summary changed from Upgrade MediaElement to 4.0.3 to Upgrade MediaElement to 4.0.4

#9 @rafa8626
6 weeks ago

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

Last edited 6 weeks ago by rafa8626 (previous) (diff)

#10 @Plastikschnitzer
6 weeks ago

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).

This ticket was mentioned in Slack in #core-media by swissspidy. View the logs.


6 weeks ago

#12 @rafa8626
6 weeks ago

  • Summary changed from Upgrade MediaElement to 4.0.4 to Upgrade MediaElement to 4.0.5

This ticket was mentioned in Slack in #core-media by andreiglingeanu. View the logs.


6 weeks ago

#14 @Presskopp
5 weeks ago

  • Summary changed from Upgrade MediaElement to 4.0.5 to Upgrade MediaElement to 4.0.6

#15 @grosbouff
4 weeks ago

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

#16 @Presskopp
4 weeks ago

  • Summary changed from Upgrade MediaElement to 4.0.6 to Upgrade MediaElement to 4.0.7

@grosbouff
4 weeks ago

patch for mediaElement.js (4.0.7)

#17 @grosbouff
4 weeks ago

  • Keywords has-patch added; needs-patch removed

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

#18 @azaozz
4 weeks ago

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 ).

#19 @azaozz
4 weeks ago

  • Keywords has-patch removed

#20 @grosbouff
4 weeks ago

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...

#21 @grosbouff
3 weeks ago

  • Keywords has-patch added

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().

#22 @Presskopp
3 weeks ago

  • Summary changed from Upgrade MediaElement to 4.0.7 to Upgrade MediaElement to 4.X

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

#23 @desrosj
3 weeks ago

  • Keywords needs-refresh added

Needs a patch refresh for 4.1.x.

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


3 weeks ago

#25 @jbpaul17
3 weeks ago

  • Milestone changed from 4.7.5 to 4.8.1

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

#26 @timmydcrawford
3 weeks ago

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
3 weeks ago

just to be sure

#27 @rafa8626
3 weeks ago

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

#28 @rafa8626
3 weeks ago

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

#29 @rafa8626
3 weeks ago

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

#30 @grosbouff
3 weeks ago

@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 ?

#31 follow-up: @rafa8626
3 weeks ago

@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

#32 in reply to: ↑ 31 @grosbouff
3 weeks ago

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 !

#33 @rafa8626
3 weeks ago

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

#34 @grosbouff
3 weeks ago

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

#35 follow-up: @timmydcrawford
3 weeks ago

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

#36 @rafa8626
3 weeks ago

@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

Last edited 3 weeks ago by rafa8626 (previous) (diff)

#37 @rafa8626
3 weeks ago

  • Keywords needs-refresh removed

@grosbouff's latest patch should work as expected.

#38 @rafa8626
3 weeks ago

@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

#39 @grosbouff
3 weeks ago

@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 !

#40 follow-up: @rafa8626
3 weeks ago

@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

);

Last edited 3 weeks ago by rafa8626 (previous) (diff)

#41 in reply to: ↑ 40 @grosbouff
3 weeks ago

Replying to rafa8626:

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

Ok, it's done in -v3 !

@rafa8626
2 weeks ago

Fix for YouTube issue

#42 in reply to: ↑ 35 @rafa8626
2 weeks ago

@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

Last edited 2 weeks ago by rafa8626 (previous) (diff)

#43 @rafa8626
2 weeks ago

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

#44 @timmydcrawford
2 weeks ago

@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?

#45 @westonruter
2 weeks ago

@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.

#46 @rafa8626
2 weeks ago

@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

#47 @grosbouff
2 weeks ago

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...

#48 @rafa8626
2 weeks ago

@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?

Last edited 2 weeks ago by rafa8626 (previous) (diff)

#49 @rafa8626
2 weeks ago

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

@rafa8626
2 weeks ago

#50 @rafa8626
2 weeks ago

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

#51 @Plastikschnitzer
2 weeks ago

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

#52 @rafa8626
2 weeks ago

@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

#53 @rafa8626
2 weeks ago

@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

#54 @Plastikschnitzer
2 weeks ago

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

#55 @rafa8626
2 weeks ago

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

#56 @rafa8626
2 weeks ago

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

#57 @rafa8626
2 weeks ago

@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

#58 follow-up: @Plastikschnitzer
2 weeks ago

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!

#59 in reply to: ↑ 58 @rafa8626
2 weeks ago

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?

#60 @grosbouff
2 weeks ago

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 ?

#61 @rafa8626
2 weeks ago

@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')
Last edited 2 weeks ago by rafa8626 (previous) (diff)

#62 @rafa8626
13 days ago

Just FYI, 4.1.1 will be available next week.

#63 @grosbouff
13 days ago

@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 ?

Last edited 13 days ago by grosbouff (previous) (diff)

This ticket was mentioned in Slack in #core by rafa8626. View the logs.


12 days ago

#65 @afercia
9 days ago

  • Focuses accessibility added

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:

https://cldup.com/nbZW2EWmZS.png

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

https://cldup.com/-vCeRIT5MY.png

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.

#66 @rafa8626
9 days ago

@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?

#67 @grosbouff
9 days ago

@rafa8626 no problems ! Team work !

#68 @afercia
8 days ago

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

#69 @rafa8626
7 days ago

@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

#70 @swissspidy
40 hours ago

#40788 was marked as a duplicate.

#71 @BackuPs
39 hours ago

@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

Last edited 39 hours ago by BackuPs (previous) (diff)

#72 @swissspidy
38 hours ago

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.

#73 @BackuPs
34 hours ago

@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 !

Last edited 34 hours ago by BackuPs (previous) (diff)
Note: See TracTickets for help on using tickets.