我的目标是在选定的时间偏移开始播放视频。我正在使用expo av的视频组件,因为我希望它能在网络和设备上运行。通过使用Millis道具的位置,它看起来非常直接。当我在Android上测试它时,无论是在模拟器还是设备中,这都能很好地工作。然而,当我在网络上测试时,它总是在视频开始时开始播放(时间0(在Chrome和Edge浏览器(最新版本(中进行测试。我是expo的新手,反应是原生的,所以如果我在网络上做错了什么,请告诉我
这是我的简化代码
import React from 'react';
import { StyleSheet, Dimensions, View } from 'react-native';
import { Video } from 'expo-av'
export default function App() {
const url = require('./assets/sample.mp4')
// Start at 3 minute mark
const initSeek = 180000
const window = Dimensions.get("window");
const videoHeight = Math.floor(window.width / 1.777)
console.log("Video height %d width %d", videoHeight, window.width)
return (
<View style={styles.container}>
<Video
useNativeControls
resizeMode={'cover'}
source = {url}
positionMillis = {initSeek}
shouldPlay = {true}
style={ {width: '100%', height:videoHeight}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'flex-start',
justifyContent: 'flex-start',
},
});
这个答案提供了一个在我的情况下有效的方法-添加ref
const _handleVideoRef = (component,) => {
const playbackObject = component;
playbackObject.playFromPositionAsync(initSeek)
}
...
ref={(component) => _handleVideoRef(component, initSeek)}
完整更新的代码片段现在可以在web和android上使用。如果有人能解释为什么原作不起作用,我仍然很感兴趣——我对的理解似乎有差距
export default function App() {
const url = require('./assets/sample.mp4')
// Start at 3 minute mark
const initSeek = 180000
const window = Dimensions.get("window");
const videoHeight = Math.floor(window.width / 1.777)
console.log("Video height %d width %d", videoHeight, window.width)
const _handleVideoRef = (component,) => {
const playbackObject = component;
playbackObject.playFromPositionAsync(initSeek)
}
return (
<View style={styles.container}>
<Video
useNativeControls
ref={(component) => _handleVideoRef(component, initSeek)}
resizeMode={'cover'}
source = {url}
positionMillis = {initSeek}
shouldPlay = {true}
style={ {width: '100%', height:videoHeight}}
/>
</View>
);
}