WordPress.org

Make WordPress Core

Opened 10 months ago

Last modified 10 months ago

#40373 new enhancement

Conditionally initialize Playlist Media Element

Reported by: kostasx Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.7.3
Component: Media Keywords: dev-feedback 2nd-opinion
Focuses: javascript Cc:

Description

The single element media player (https://develop.svn.wordpress.org/trunk/src/wp-includes/js/mediaelement/wp-mediaelement.js) uses a special jQuery filter to remove already initialized media elements from the initialization process:

Source: https://develop.svn.wordpress.org/trunk/src/wp-includes/js/mediaelement/wp-mediaelement.js
Lines: 43~49

			// Only initialize new media elements.
			$( '.wp-audio-shortcode, .wp-video-shortcode' )
				.not( '.mejs-container' )
				.filter(function () {
					return ! $( this ).parent().hasClass( 'mejs-mediaelement' );
				})
				.mediaelementplayer( settings );

However, a similar approach is not implemented for the Playlist element and might be needed.

Source: https://develop.svn.wordpress.org/trunk/src/wp-includes/js/mediaelement/wp-playlist.js
Lines: 167~171

Original Code:

    $(document).ready(function () {
		$('.wp-playlist').each( function() {
			return new WPPlaylistView({ el: this });
		} );
    });

Should probably be (my suggestion):

   // Only initialize new media elements.
    $(document).ready(function () {
		$('.wp-playlist')
		.not(':has(.mejs-mediaelement)')    // <-- Filter out already initialized playlist media elements
		.each( function() {
			return new WPPlaylistView({ el: this });
		} );
    });

I have tested both media elements (single player and playlist player) on an Ajax-based WordPress theme, and I've noticed that an already initialized playlist media element stops playing when the wp-playlist.js file is reloaded on a new page load.
When the conditional (patch above) is placed in the code, the playlist element continues playing without problem on subsequent page loads.

Awaiting feedback.

Change History (2)

#1 @kostasx
10 months ago

  • Keywords dev-feedback added

#2 @kostasx
10 months ago

  • Keywords 2nd-opinion added
Note: See TracTickets for help on using tickets.