JavaScript TypeError when Video Playlists use native video elements

[afercia]

To reproduce the JavaScript TypeError:

• use the Classic Editor
• add a Video Playlist which contains one .ogv video
• save and play the playlist (either within the editor or in the front end)
• when the .ogv video is loaded, observe the error in your browser console
• the video doesn't load and the playlist stops playing
• if the .ogv video is the first one, the playlist doesn't load at all

Uncaught TypeError: Cannot read property 'resized' of undefined
wp-playlist.js?ver=5.3-alpha-20190609.115228:88

Related code in wp-playlist.js:

https://core.trac.wordpress.org/browser/trunk/src/js/_enqueues/vendor/mediaelement/wp-playlist.js?rev=43309&marks=88-89#L81

This happens because MediaElement.js doesn't set a dimensions property for native video elements. However, wp-playlist.js still tries to get a dimensions.resized property without checking for its existence first.

Seems to me this part can be fixed quickly just checking for the property.

However, this may impact the calculation of the video size. When the playlist loads a new video, it runs some code to determine the size of the video and adjust the size of the player. Seems to me this part doesn't work very well even without the error.

WordPress is now using MediaElement.js 4.2.6. Checking the changelog, the size calculation for native video elements was fixed in 4.2.7:

4.2.7 (2017/11/17)
Fixed issue when checking for native dimensions of video element to set responsive dimensions correctly @rafa8626

Related commit: ​https://github.com/mediaelement/mediaelement/commit/26ec30053d3fd59c973fec0164989bda984bee21

Also, latest version is 4.2.10, which contains further improvements including a small accessibility fix:

4.2.10
Update volume.js (#2530) - Implementing a slight change to improve accessibility and compliance with WCAG 2.0 success criteria 4.1.1 and 4.1.2

I'd like to propose to update to 4.2.10 and fix wp-playlist.

[here]

Observed in WordPress 5.3.4 with a playlist using only mp4 videos.

[here]

• Confirmed with mediaelement 4.2.13 as upgraded in wp5.3 #46681
• May be affected by mediaelement update to 4.2.16 in wp5.6 #51315 - Not yet tested
• Confirmed in WordPress 5.5.1
• Confirmed in multiple themes
  • twentyseventeen:2.4
  • twentytwenty:1.3 (out of date)
  • 3rd party theme
• Related to Gutenberg open issue to implement Playlist block (playlist does not currently exist in Gutenberg as a block)
  • ​https://github.com/WordPress/gutenberg/issues/805
  • ​https://www.reddit.com/r/Wordpress/comments/aen8fn/no_gutenberg_block_music_playlists_in_future/
• May be related to "featured images" associated with the playlist items
• Removing and re-adding a featured image appears to have resolved for today's use case

[afercia]

I can still reproduce the JS TypeError, even now that MediaElementJS has been updated to version 4.2.16 in [49070].

47513.diff​ introduces a simple check to avoid the error.

To test:

• repeat the steps in this ticket description
• observe there are no errors in your browser's console
• check the .ogv video plays

Moving to 6.0 consideration.

[costdev]

Hi @afercia, I can't seem to reproduce this following the steps in the ticket's description. There are no errors in my console and the .ogv file plays as expected.

I tested with:

• an .ogv and an .mp4 in a video playlist.
• using Classic Editor.
• Twenty Twenty-One and Twenty Fourteen.
• Chrome and Firefox.

Can you run another test on this to see if the issue still occurs?

[costdev]

With 6.0 RC1 tomorrow, this ticket still needs testing to ensure the issue can still be reproduced and, if so, needs testing to ensure the patch resolves the issue.

Moving to the 6.1 milestone. If this can be tested to a committer's satisfaction before the 6.0 RC1 release party, feel free to bring it back into the milestone.

[afercia]

Hi @costdev. Thanks for testing.
I can still reproduce the issue on latest trunk. My test environment:

• macOS 12.3.1
• Latest Chrome version 101.0.4951.41
• Latest Firefox version 99.0.1

I'll attach a screenshot of the error.

[afercia]

OGV file I tested with

[rafiahmedd]

@afercia I was trying to reproduce the issue in my environment, however, I couldn’t. I am using the latest macOS Monterey 12.5 and Chrome 103.0.5060.134

Is there anything else I should do to reproduce the issue?

Thanks

[afercia]

I can still reproduce this issue. Will try to describe the simple steps to reproduce it:

• Add a Video playlist to a page. You can use the Classic editor or a Classic block.
• Use a .mp4 as the first video in the playlist.
• Use the .ogv attached to this ticket as the second video in the playlist.
• The shortcode will be something like this, with the IDs of your videos:

[playlist type="video" ids="2184,2183"]

• Publish the page and go to the front end.
• Play the playlist.
• Observe that as soon as the first video ends and the second one attempts to start, a JS error is triggered. See screenshot below.

Tested on macOS, Chrome 104.

[aristath]

The patch looks good to me, and simply adds an extra condition to ensure that dimensions.resized actually exists before we use it. It's defensive coding and that can only be a good thing in the context of WordPress.

[joedolson]

Agree that this looks good. Reviewed & marking for commit.

[joedolson]

In 54279:

Media: Fix JS TypeError with video playlists and native video.

Verify that the resized property exists on a video in the playlist before attempting to read it. Prevent a TypeError from being thrown and breaking the playlist if a video type requires native video support.

Props afercia, here.
Fixes #47513.