Make WordPress Core

Opened 5 years ago

Closed 19 months ago

#47513 closed defect (bug) (fixed)

JavaScript TypeError when Video Playlists use native video elements

Reported by: afercia's profile afercia Owned by: joedolson's profile joedolson
Milestone: 6.1 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-screenshots has-patch has-testing-info commit
Focuses: javascript Cc:

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

playlist JS error.png (180.3 KB) - added by afercia 5 years ago.
47513.diff (843 bytes) - added by afercia 2 years ago.
47513 console error.png (378.4 KB) - added by afercia 2 years ago.
big_buck_bunny.ogv (4.4 MB) - added by afercia 2 years ago.
OGV file I tested with
playlist js typeerror.png (319.7 KB) - added by afercia 20 months ago.

Change History (21)

#1 @here
4 years ago

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

#2 @here
4 years ago

@afercia
2 years ago

#3 @afercia
2 years ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 6.0
  • Owner set to afercia
  • Status changed from new to assigned

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.

#4 @afercia
2 years ago

  • Component changed from Editor to Media

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


2 years ago

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


2 years ago

#7 @costdev
2 years ago

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?

#8 @costdev
2 years ago

  • Keywords reporter-feedback needs-testing has-testing-info added
  • Milestone changed from 6.0 to 6.1

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.

#9 @afercia
2 years ago

  • Keywords reporter-feedback removed

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
2 years ago

OGV file I tested with

#10 @rafiahmedd
21 months ago

@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

#11 @afercia
20 months ago

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.

#12 @aristath
20 months ago

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.

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


19 months ago

#14 @joedolson
19 months ago

  • Keywords commit added
  • Owner changed from afercia to joedolson
  • Status changed from assigned to accepted

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

#15 @joedolson
19 months ago

  • Keywords needs-testing removed

#16 @joedolson
19 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

Note: See TracTickets for help on using tickets.