Start playing a video at a time offset using expo-av on web

Question

My goal is to start playing a video at a selected time offset. I am using the video component from expo-av since I want it to run on both web and device. It seems pretty straight forward by using the positionMillis props. This works well when I test it on Android - both in an emulator and device. However when I test on the web it always starts playing at the beginning of the video (time 0) Tested in both Chrome and Edge browsers (latest versions) I am new to expo and react-native, so please let me know if I am doing something wrong on the web

This is my simplified code

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

});

score 0 · Answer 1 · answered Aug 03 '22 at 17:56

This answer provides a method that works in my case - adding a ref

  const _handleVideoRef = (component,) => {
    const playbackObject = component;
    playbackObject.playFromPositionAsync(initSeek)
  }

...

ref={(component) => _handleVideoRef(component, initSeek)}

The full updated code snippet now works on both web and android. I am still interested if someone can explain why the original did not work - I seem to have a gap in my understanding

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>
  );
}

Start playing a video at a time offset using expo-av on web

1 Answers1