fix(hls): use source element for Safari AirPlay auto MSE

Author: gemxx

packages/xgplayer-cast/__tests__/airplay.spec.js

@@ -139,6 +139,31 @@ describe('Airplay native source preparation', () => {
     expect(player.media.webkitShowPlaybackTargetPicker).toHaveBeenCalled()
   })
 
+  test('adds AirPlay fallback source while keeping MSE blob src before opening picker', () => {
+    const media = document.createElement('video')
+    media.src = 'blob:https://example.com/mse'
+    media.load = jest.fn()
+    media.webkitShowPlaybackTargetPicker = jest.fn()
+
+    const { airplay, player, plugin } = createAirplay(
+      {},
+      {
+        media,
+        config: { url: 'https://cdn.example.com/main.m3u8' }
+      }
+    )
+
+    airplay._onRequestCast({ protocol: 'airplay' })
+
+    const airplaySource = player.media.querySelector(
+      'source[data-xgplayer-cast-airplay="true"]'
+    )
+    expect(plugin._suspendMSEPlugin).not.toHaveBeenCalled()
+    expect(player.media.getAttribute('src')).toBe('blob:https://example.com/mse')
+    expect(airplaySource.src).toBe('https://cdn.example.com/main.m3u8')
+    expect(player.media.webkitShowPlaybackTargetPicker).toHaveBeenCalled()
+  })
+
   test('keeps srcObject while opening picker and only adds AirPlay fallback source', () => {
     const srcObject = { type: 'ManagedMediaSource' }
     const media = document.createElement('video')

packages/xgplayer-hls/__tests__/mse-airplay.spec.js

@@ -4,6 +4,8 @@ describe('MSE AirPlay handoff restore', () => {
   const originalMediaSource = window.MediaSource
   const originalCreateObjectURL = URL.createObjectURL
   const originalRevokeObjectURL = URL.revokeObjectURL
+  const originalWebKitPlaybackTargetAvailabilityEvent =
+    window.WebKitPlaybackTargetAvailabilityEvent
 
   beforeEach(() => {
     class FakeMediaSource {
@@ -19,12 +21,56 @@ describe('MSE AirPlay handoff restore', () => {
     window.MediaSource = FakeMediaSource
     URL.createObjectURL = jest.fn(() => 'blob:https://example.com/mse')
     URL.revokeObjectURL = jest.fn()
+    delete window.WebKitPlaybackTargetAvailabilityEvent
   })
 
   afterEach(() => {
     window.MediaSource = originalMediaSource
     URL.createObjectURL = originalCreateObjectURL
     URL.revokeObjectURL = originalRevokeObjectURL
+    if (originalWebKitPlaybackTargetAvailabilityEvent === undefined) {
+      delete window.WebKitPlaybackTargetAvailabilityEvent
+    } else {
+      window.WebKitPlaybackTargetAvailabilityEvent =
+        originalWebKitPlaybackTargetAvailabilityEvent
+    }
+  })
+
+  test('auto keeps non-AirPlay MSE attached through media src', async () => {
+    const media = document.createElement('video')
+    const mse = new MSE(null, {
+      attachMode: 'auto'
+    })
+
+    mse.bindMedia(media)
+
+    expect(media.getAttribute('src')).toBe('blob:https://example.com/mse')
+    expect(media.querySelectorAll('source')).toHaveLength(0)
+
+    await mse.unbindMedia()
+  })
+
+  test('auto uses source element for AirPlay-capable WebKit MSE', async () => {
+    window.WebKitPlaybackTargetAvailabilityEvent =
+      function WebKitPlaybackTargetAvailabilityEvent() {}
+    const media = document.createElement('video')
+    media.webkitShowPlaybackTargetPicker = jest.fn()
+
+    const mse = new MSE(null, {
+      attachMode: 'auto'
+    })
+
+    mse.bindMedia(media)
+
+    const sources = Array.from(media.querySelectorAll('source'))
+
+    expect(media.getAttribute('src')).toBe(null)
+    expect(media.src).toBe('')
+    expect(sources.map(source => source.src)).toEqual([
+      'blob:https://example.com/mse'
+    ])
+
+    await mse.unbindMedia()
   })
 
   test('binds owned MSE source element without removing cast fallback source', () => {

packages/xgplayer-hls/__tests__/options.spec.js

@@ -13,7 +13,7 @@ describe('getOption', () => {
     expect(opts.bufferBehind).toBe(10)
     expect(opts.maxJumpDistance).toBe(3)
     expect(opts.startTime).toBe(0)
-    expect(opts.mseAttachMode).toBe('source-element')
+    expect(opts.mseAttachMode).toBe('auto')
     expect(opts.fetchOptions).toBe(undefined)
     expect(opts.isLive).toBe(undefined)
   })

packages/xgplayer-hls/src/hls/config.js

@@ -65,10 +65,10 @@ export function getConfig(cfg) {
     preferMMS: false,
     preferMMSStreaming: false,
     // MSE object URL 绑定方式：
+    // - 'auto': ManagedMediaSource 或 AirPlay-capable WebKit 使用 'source-element'，其他 MediaSource 使用 'src'
     // - 'source-element': 通过生成的 <source> 挂载，便于 AirPlay fallback source 共存
     // - 'src': 通过 video.src 挂载
-    // - 'auto': ManagedMediaSource 使用 'source-element'，其他 MediaSource 使用 'src'
-    mseAttachMode: 'source-element',
+    mseAttachMode: 'auto',
     mseLowLatency: true, // mse 低延迟模式渲染 https://issues.chromium.org/issues/41161663
     fixerConfig: {
       forceFixLargeGap: false, // 强制修复音视频PTS LargeGap, PTS从0开始

packages/xgplayer-streaming-shared/src/mse.js

@@ -41,11 +41,20 @@ function appendMseSource(media, mimeType, url) {
   return source
 }
 
-function getAttachMode(mode, useMMS) {
+function isAirPlayCapableWebKit(media) {
+  const win = media?.ownerDocument?.defaultView || (isBrowser ? window : null)
+  return (
+    !!media &&
+    typeof media.webkitShowPlaybackTargetPicker === 'function' &&
+    typeof win?.WebKitPlaybackTargetAvailabilityEvent === 'function'
+  )
+}
+
+function getAttachMode(mode, useMMS, media) {
   if (mode === 'src' || mode === 'source-element') {
     return mode
   }
-  return useMMS ? 'source-element' : 'src'
+  return useMMS || isAirPlayCapableWebKit(media) ? 'source-element' : 'src'
 }
 
 /**
@@ -145,9 +154,9 @@ export class MSE {
       openLog: false,
       preferMMS: false,
       // MediaSource object URL 绑定方式：
+      // - 'auto': ManagedMediaSource 或 AirPlay-capable WebKit 使用 'source-element'，其他 MediaSource 使用 'src'
       // - 'source-element': 通过生成的 <source> 挂载，便于 AirPlay fallback source 共存
       // - 'src': 通过 video.src 挂载
-      // - 'auto': ManagedMediaSource 使用 'source-element'，其他 MediaSource 使用 'src'
       attachMode: 'auto'
     }
   }
@@ -300,7 +309,7 @@ export class MSE {
 
     this._removeAttachedSource()
 
-    const attachMode = getAttachMode(config.attachMode, useMMS)
+    const attachMode = getAttachMode(config.attachMode, useMMS, media)
 
     if (attachMode === 'source-element') {
       removeSrc(media)