使用web上的expo-av一次播放视频。

Question

我的目标是开始播放一个视频在选定的时间偏移。我使用的视频组件从博览-av，因为我希望它运行在网络和设备。通过使用positionMillis道具，它看起来非常直接。当我在Android上测试它时--无论是在模拟器还是在设备上--它都能很好地工作。然而，当我在网络上进行测试时，它总是在Chrome和Edge浏览器(最新版本)中测试的视频的开头(时间0)开始播放，我对expo和react(本地版)都是新手，所以请告诉我我在网络上做了什么错事。

这是我的简化代码

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',
  },

});

Answer 1

这个答案提供了一个在我的情况下工作的方法--添加一个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>
  );
}