[wp-trac] [WordPress Trac] #26779: Multiple mediaelement instances of the same self-hosted video file on a page breaks in all players after first

[WordPress Trac]

#26779: Multiple mediaelement instances of the same self-hosted video file on a
page breaks in all players after first
--------------------------+------------------
 Reporter:  ericlewis     |       Owner:
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  3.9
Component:  Media         |     Version:  3.6
 Severity:  normal        |  Resolution:
 Keywords:  needs-patch   |     Focuses:
--------------------------+------------------

Comment (by 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 `304`s 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.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/26779#comment:6>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform