Skip to content

Commit f2411ad

Browse files
fix: default to MSE except safari (#1254)
This change updates the video player logic to use MSE by default if its not Safari since. Chromium-based browsers with native HLS support were experiencing issues with captions not available. By defaulting to MSE except on Safari, we ensure captions work consistently across browsers. **Changes:** - Replaced Chrome detection with Safari detection. - Updated logic to fallback to MSE for non-Safari browsers. - Maintains native HLS for Safari for optimal compatibility.
1 parent 8dd92b7 commit f2411ad

File tree

1 file changed

+3
-9
lines changed

1 file changed

+3
-9
lines changed

packages/playback-core/src/index.ts

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -329,7 +329,6 @@ declare global {
329329

330330
const userAgentStr = globalThis?.navigator?.userAgent ?? '';
331331
const userAgentPlatform = globalThis?.navigator?.userAgentData?.platform ?? '';
332-
const browserBrands = globalThis?.navigator?.userAgentData?.brands ?? [];
333332

334333
// NOTE: Our primary *goal* with this is to detect "non-Apple-OS" platforms which may also support
335334
// native HLS playback. Our primary concern with any check for this is "false negatives" where we
@@ -354,12 +353,8 @@ const isAndroidLike =
354353
userAgentStr.toLowerCase().includes('android') ||
355354
['x11', 'android'].some((platformStr) => userAgentPlatform.toLowerCase().includes(platformStr));
356355

357-
const googleChromeBrand = browserBrands.find((brand) => brand.brand === 'Google Chrome');
358-
359-
const isChromeWithNativeHLS = (mediaEl: Pick<HTMLMediaElement, 'canPlayType'>) =>
360-
googleChromeBrand &&
361-
parseInt(googleChromeBrand.version ?? '0') >= 141 &&
362-
!!mediaEl.canPlayType('application/vnd.apple.mpegurl');
356+
const isSafari = (mediaEl: Pick<HTMLMediaElement, 'canPlayType'>) =>
357+
/^((?!chrome|android).)*safari/i.test(userAgentStr) && !!mediaEl.canPlayType('application/vnd.apple.mpegurl');
363358

364359
// NOTE: Exporting for testing
365360
export const muxMediaState: WeakMap<
@@ -370,8 +365,7 @@ export const muxMediaState: WeakMap<
370365
const MUX_VIDEO_DOMAIN = 'mux.com';
371366
const MSE_SUPPORTED = Hls.isSupported?.();
372367

373-
const shouldDefaultToMSE = (mediaEl: Pick<HTMLMediaElement, 'canPlayType'>) =>
374-
isAndroidLike || isChromeWithNativeHLS(mediaEl);
368+
const shouldDefaultToMSE = (mediaEl: Pick<HTMLMediaElement, 'canPlayType'>) => isAndroidLike || !isSafari(mediaEl);
375369

376370
export const generatePlayerInitTime = () => {
377371
return mux.utils.now();

0 commit comments

Comments
 (0)