[wp-trac] [WordPress Trac] #47513: JavaScript TypeError when Video Playlists use native video elements

[WordPress Trac]

#47513: JavaScript TypeError when Video Playlists use native video elements
--------------------------+-----------------------------
 Reporter:  afercia       |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Editor        |    Version:
 Severity:  normal        |   Keywords:  has-screenshots
  Focuses:  javascript    |
--------------------------+-----------------------------
 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47513>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform