WordPress.org

Make WordPress Core

Opened 4 months ago

#47513 new defect (bug)

JavaScript TypeError when Video Playlists use native video elements

Reported by: afercia Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Editor Keywords: has-screenshots
Focuses: javascript Cc:
PR Number:

Description

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.

Attachments (1)

playlist JS error.png (180.3 KB) - added by afercia 4 months ago.

Download all attachments as: .zip

Change History (1)

Note: See TracTickets for help on using tickets.