2026-03-06 14:52:28 +08:00
|
|
|
import React from 'react';
|
2026-03-06 12:58:41 +08:00
|
|
|
import { View, StyleSheet, Dimensions } from 'react-native';
|
2026-03-06 14:52:28 +08:00
|
|
|
import { WebView } from 'react-native-webview';
|
2026-03-06 12:58:41 +08:00
|
|
|
|
|
|
|
|
const { width } = Dimensions.get('window');
|
|
|
|
|
const VIDEO_HEIGHT = width * 0.5625;
|
|
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
|
uri: string;
|
|
|
|
|
}
|
|
|
|
|
|
2026-03-06 14:52:28 +08:00
|
|
|
const buildHtml = (uri: string) => `
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<style>
|
|
|
|
|
* { margin:0; padding:0; box-sizing:border-box; background:#000; }
|
|
|
|
|
video { width:100vw; height:100vh; object-fit:contain; display:block; }
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<video id="v" controls autoplay playsinline webkit-playsinline></video>
|
|
|
|
|
<script>
|
|
|
|
|
document.getElementById('v').src = ${JSON.stringify(uri)};
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
`;
|
2026-03-06 12:58:41 +08:00
|
|
|
|
2026-03-06 14:52:28 +08:00
|
|
|
export function NativeVideoPlayer({ uri }: Props) {
|
2026-03-06 12:58:41 +08:00
|
|
|
return (
|
|
|
|
|
<View style={styles.container}>
|
2026-03-06 14:52:28 +08:00
|
|
|
<WebView
|
|
|
|
|
source={{ html: buildHtml(uri) }}
|
|
|
|
|
style={styles.webview}
|
|
|
|
|
allowsInlineMediaPlayback
|
|
|
|
|
mediaPlaybackRequiresUserAction={false}
|
|
|
|
|
javaScriptEnabled
|
|
|
|
|
originWhitelist={['*']}
|
|
|
|
|
scrollEnabled={false}
|
2026-03-06 12:58:41 +08:00
|
|
|
/>
|
|
|
|
|
</View>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
|
container: { width, height: VIDEO_HEIGHT, backgroundColor: '#000' },
|
2026-03-06 14:52:28 +08:00
|
|
|
webview: { width, height: VIDEO_HEIGHT, backgroundColor: '#000' },
|
2026-03-06 12:58:41 +08:00
|
|
|
});
|
