feat: implement phase2 player isolation and media config

src/components/VideoElement.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useCallback, useState } from 'react'
 import { usePlayerContext } from '../contexts/PlayerContext'
-import type { SubtitleTrack, AudioTrack, VideoQuality } from '../types'
+import type { SubtitleTrack, AudioTrack, VideoQuality, VideoProtocol } from '../types'
 import { validateVideoURL, getCORSErrorMessage, isCORSError } from '../utils/corsHelper'
 import { setHlsAudioTrack, setHlsQualityLevel } from '../utils/hlsControl'
 import { setupHlsInstance } from '../utils/hlsSetup'
@@ -14,12 +14,17 @@ import './VideoElement.css'
 interface VideoElementProps {
   src: string
   poster?: string
+  protocol?: 'auto' | VideoProtocol
   autoplay?: boolean
   loop?: boolean
   muted?: boolean
   volume?: number
   playbackRate?: number
   currentTime?: number
+  crossOrigin?: '' | 'anonymous' | 'use-credentials'
+  preload?: 'none' | 'metadata' | 'auto'
+  playsInline?: boolean
+  controlsList?: string
   subtitles?: SubtitleTrack[]
   onPlay?: () => void
   onPause?: () => void
@@ -45,12 +50,17 @@ interface VideoElementProps {
 export const VideoElement: React.FC<VideoElementProps> = ({
   src,
   poster,
+  protocol = 'auto',
   autoplay = false,
   loop = false,
   muted = false,
   volume,
   playbackRate,
   currentTime: initialCurrentTime,
+  crossOrigin,
+  preload = 'metadata',
+  playsInline = true,
+  controlsList,
   subtitles = [],
   onPlay,
   onPause,
@@ -416,7 +426,15 @@ export const VideoElement: React.FC<VideoElementProps> = ({
     }
 
     // Detect video protocol
-    const detection = detectVideoProtocol(src)
+    const detectedProtocol = detectVideoProtocol(src)
+    const detection =
+      protocol === 'auto'
+        ? detectedProtocol
+        : {
+            ...detectedProtocol,
+            protocol,
+            needsSpecialPlayer: protocol !== 'native',
+          }
     let cleanupFn: (() => void) | null = null
 
     const teardownPlayer = () => {
@@ -596,6 +614,7 @@ export const VideoElement: React.FC<VideoElementProps> = ({
     }
   }, [
     src,
+    protocol,
     autoplay,
     videoRef,
     handleError,
@@ -762,8 +781,10 @@ export const VideoElement: React.FC<VideoElementProps> = ({
         poster={poster}
         loop={loop}
         muted={muted}
-        playsInline
-        preload="metadata"
+        crossOrigin={crossOrigin}
+        playsInline={playsInline}
+        preload={preload}
+        controlsList={controlsList}
         onPlay={handlePlay}
         onPause={handlePause}
         onTimeUpdate={handleTimeUpdate}