Media blocks: Stop other page media when playback starts

[scruffian]

What?

Alternative approach to #81387.

Stops other page media when a core Playlist, Audio, or Video block starts playback. Unlike #81387's core-block-only native media selector, this version coordinates with every document-level audio and video element once the media playback coordinator has loaded.

Why?

Playlist blocks already avoid overlapping playlist tracks, but a Playlist block and standalone media could play together. This explores the broader behavior where starting one relevant media experience pauses other media on the page, including media outside core block wrappers.

How?

Adds a small shared frontend media playback coordinator script module for Audio and Video blocks. The coordinator listens for captured native play events on any audio or video element and pauses the other native media elements on the page. Playlist waveform players still register with the coordinator because their underlying audio element is owned by the waveform library rather than discoverable in block markup.

Testing Instructions

1. Add an Audio block, a Video block, and a Playlist block with at least one track.
2. Add another native audio or video element outside a core media block wrapper, if desired.
3. View the post or page on the front end.
4. Start playback in one media element.
5. Start playback in another media element and confirm the first one stops.
6. Repeat across Audio, Video, Playlist, and non-core native media combinations.

Testing Instructions for Keyboard

1. Use Tab to focus a media control in an Audio, Video, or Playlist block.
2. Start playback with the keyboard.
3. Tab to another media block and start playback with the keyboard.
4. Confirm the previously playing media stops.

Validation

• npm run test:unit packages/block-library/src/utils/test/media-playback.js packages/block-library/src/playlist/test/view.js
• npm run lint:js -- packages/block-library/src/utils/media-playback.js packages/block-library/src/utils/test/media-playback.js packages/block-library/src/playlist/view.js packages/block-library/src/playlist/test/view.js
• npm run lint:pkg-json -- packages/block-library/package.json
• npm run build -- --skip-types --webpack-copy-php --webpack-bundle-analyzer=false --no-watch

[github-actions]

Size Change: +901 B (+0.01%)

Total Size: 7.65 MB

📦 View Changed

Filename	Size	Change
build/modules/block-library/media-playback.min.js	515 B	+515 B (new file)	🆕
build/modules/block-library/playlist/view.min.js	17.4 kB	+334 B (+1.95%)
build/scripts/block-library/index.min.js	357 kB	+52 B (+0.01%)

_{compressed-size-action}

[github-actions]

Flaky tests detected in 609ddde.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/31394144895
📝 Reported tests:

keeps a new post discoverable after the editor automatically autosaves it (RTC WebSocket) in /test/e2e/specs/editor/collaboration/collaboration-autodraft-autosave-loss.spec.ts, passed after 1 failed attempt.

Error: apiRequestContext.fetch: socket hang up
Call log:
  - → GET http://localhost:8889/wp-json/wp/v2/posts/5?context=edit
    - user-agent: Playwright/1.62.1 (x64; ubuntu 24.04) node/20.20 CI/1
    - accept: */*
    - accept-encoding: gzip,deflate,br
    - X-WP-Nonce: fa41433b30
    - cookie: wordpress_test_cookie=WP%20Cookie%20check; wordpress_logged_in_23778236db82f19306f247e20a353a99=admin%7C1786542437%7CMhEXq3SitzTbLcrAXoA2EfXFEVuvsi8WPxpMdGsDdIe%7C2cb36334feed6ea203ae3eed85734efee249f37599ea13fe3932f8898761629f; wp-settings-time-1=1786369642

    at RequestUtils.rest (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/rest.ts:112:39)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/collaboration/collaboration-autodraft-autosave-loss.spec.ts:102:35