Multiple mediaelement instances of the same self-hosted video file on a page breaks in all players after first

[ericlewis]

I have two instances of a .mov file on the same page for responsive design purposes. The first one works fine, but the second one doesn't preload, and loads endlessly when clicking play.

[wonderboymusic]

If you press play on the first, play on the second, play on the first, then play on the second: they will both play. Will look at this.

[wonderboymusic]

In 27420:

Add a timestamp to the urls passed to <audio> and <video> in the modal to ensure that cached view instances aren't referenced by MEjs. Pause the player when closing the controller's modal.

See #27016, #26779.

[wonderboymusic]

This is probably garbage not being collected properly - I am chatting with John Dyer about it

[wonderboymusic]

Notes as I'm looking at this:

• only happens for video
• 1st video will play after clicking play on both of them a few times

[wonderboymusic]

Ok, turns out my query string method has some merit. Here's why this happens:

• preload="metadata" tells the browser that fetching its metadata (dimensions, first frame, track list, duration, and so on) is desirable, It does this by requesting part of the file and then canceling the request. When playing, it appears it is making Range requests because the responses come back as 206.
• Because the first file is buffered and the canceled, and because the 2nd file is the exact same URL as the first, the browser ignores it.
• We can make them appear to be different files by appending a cache-buster to the sources. yolo.mp4?_=1 - with the value of _ being the instance number of the shortcode. Using add_query_arg() assures that we don't bust the URL. _ is the same var name jQuery uses to send cache-busting requests.
• The good thing: the browser will return 304s for subsequent requests for the videos, so we aren't really cache-busting every time, and they will retain their unique identity if the same source appears more than once on the page.

[wonderboymusic]

In 27519:

Account for preload="metadata" in audio and video shortcodes when multiple versions of the same <source> appear on the page by appending a query arg to "cache-bust" passed sources. The query arg is used to make the sources "unique." They will still be cached by the browser and won't bust the cache on every request.

Fixes #26779.

[wonderboymusic]

In 27520:

Add a class property to wp.media.view.MediaDetails called instances that is incremented every time the class is invoked. This mimics what happens in the shortcodes: the sources receive an incremented cache-buster so that the browser won't ignore the file when preload="metadata" is set.

See #26779.