WordPress.org

Make WordPress Core

Opened 16 months ago

Closed 13 months ago

Last modified 13 months ago

#26779 closed defect (bug) (fixed)

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

Reported by: ericlewis Owned by: wonderboymusic
Milestone: 3.9 Priority: normal
Severity: normal Version: 3.6
Component: Media Keywords: needs-patch
Focuses: Cc:

Description

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.

Change History (8)

comment:1 @wonderboymusic15 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 3.9

comment:2 @wonderboymusic15 months ago

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.

comment:3 @wonderboymusic14 months ago

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.

comment:4 @wonderboymusic14 months ago

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

comment:5 @wonderboymusic13 months ago

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

comment:6 @wonderboymusic13 months ago

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.

comment:7 @wonderboymusic13 months ago

  • Owner set to wonderboymusic
  • Resolution set to fixed
  • Status changed from new to closed

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.

comment:8 @wonderboymusic13 months ago

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.

Note: See TracTickets for help on using tickets.