1

components/NativeVideoPlayer.tsx

@@ -0,0 +1,37 @@
+import React, { useRef, useState } from 'react';
+import { View, StyleSheet, Dimensions } from 'react-native';
+import { Video, ResizeMode, AVPlaybackStatus } from 'expo-av';
+
+const { width } = Dimensions.get('window');
+const VIDEO_HEIGHT = width * 0.5625;
+
+interface Props {
+  uri: string;
+}
+
+export function NativeVideoPlayer({ uri }: Props) {
+  const videoRef = useRef<Video>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  const onPlaybackStatusUpdate = (s: AVPlaybackStatus) => {
+    if (s.isLoaded) setIsPlaying(s.isPlaying);
+  };
+
+  return (
+    <View style={styles.container}>
+      <Video
+        ref={videoRef}
+        source={{ uri, headers: { Referer: 'https://www.bilibili.com' } }}
+        style={styles.video}
+        resizeMode={ResizeMode.CONTAIN}
+        onPlaybackStatusUpdate={onPlaybackStatusUpdate}
+        useNativeControls
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { width, height: VIDEO_HEIGHT, backgroundColor: '#000' },
+  video: { width, height: VIDEO_HEIGHT },
+});

components/VideoPlayer.tsx

@@ -1,6 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { View, StyleSheet, Dimensions, Text } from 'react-native';
-import { Video, ResizeMode, AVPlaybackStatus } from 'expo-av';
+import { View, StyleSheet, Dimensions, Text, Platform } from 'react-native';
 
 const { width } = Dimensions.get('window');
 const VIDEO_HEIGHT = width * 0.5625;
@@ -10,13 +9,6 @@ interface Props {
 }
 
 export function VideoPlayer({ uri }: Props) {
-  const videoRef = useRef<Video>(null);
-  const [isPlaying, setIsPlaying] = useState(false);
-
-  const onPlaybackStatusUpdate = (s: AVPlaybackStatus) => {
-    if (s.isLoaded) setIsPlaying(s.isPlaying);
-  };
-
   if (!uri) {
     return (
       <View style={[styles.container, styles.placeholder]}>
@@ -25,23 +17,26 @@ export function VideoPlayer({ uri }: Props) {
     );
   }
 
-  return (
-    <View style={styles.container}>
-      <Video
-        ref={videoRef}
-        source={{ uri, headers: { Referer: 'https://www.bilibili.com' } }}
-        style={styles.video}
-        resizeMode={ResizeMode.CONTAIN}
-        onPlaybackStatusUpdate={onPlaybackStatusUpdate}
-        useNativeControls
-      />
-    </View>
-  );
+  if (Platform.OS === 'web') {
+    return (
+      <View style={styles.container}>
+        <video
+          src={uri}
+          style={{ width: '100%', height: '100%', backgroundColor: '#000' } as any}
+          controls
+          playsInline
+        />
+      </View>
+    );
+  }
+
+  // Native: use expo-av
+  const NativeVideoPlayer = require('./NativeVideoPlayer').NativeVideoPlayer;
+  return <NativeVideoPlayer uri={uri} />;
 }
 
 const styles = StyleSheet.create({
   container: { width, height: VIDEO_HEIGHT, backgroundColor: '#000' },
-  video: { width, height: VIDEO_HEIGHT },
   placeholder: { justifyContent: 'center', alignItems: 'center' },
   placeholderText: { color: '#fff', fontSize: 14 },
 });