Problems with loadAsync() and unloadAsync() in web

Expo SDK
1

SDK Version: 42
Platforms(Android/iOS/web/all): web

Hey everyone,
my following problem appears only in web, everything functions as it should in Android and IOS.

The following code should unload, than load and than play a video resource when one presses the play button (I checked several different resources).
The problem in web is, that the status from isLoaded and from isPlaying is never changing and the video never plays.
I have the feeling that the function calls doesn’t effect the current reference. If I give the Video Component a different source parameter from the beginning than this.video.current.playAsync() is working but the video gets never unloaded and the other resource never loaded.
The problem is that I can not change the source via unloadAsync() and than loadAsync().
I use Firefox as browser and I never got any error in the browser debug terminal…
As I mentioned before on IOS/Android everything works as intended!

import * as React from 'react';
import { View, StyleSheet, Button } from 'react-native';
import { Video } from 'expo-av';

export default class TestScreen extends React.Component {
  constructor(props) {
    super(props);

    // create the video reference
    this.video = React.createRef();
  }

  render() {
    return (
      <View style={styles.container}>
        <Video
          ref={this.video}
          style={styles.video}
          useNativeControls={false}
          resizeMode="contain"
          isLooping
          onPlaybackStatusUpdate={status => {
            // the status is ALWAYS true for loaded and false for playing (in web)
            console.log("loaded " + status.isLoaded)
            console.log("playing " + status.isPlaying)
          }}
        />
        <View style={styles.buttons}>
          <Button
            title={'Play'}
            onPress={async () => {
              try{
                await this.video.current.unloadAsync()
                await this.video.current.loadAsync({
                  uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4'})
                await this.video.current.playAsync()
              } 
              catch(error) {
                // There was never any kind of error, just no video
                console.log("error: " + error)
              }
          }}/>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  video: {
    alignSelf: 'center',
    width: 320,
    height: 200,
  },
  buttons: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Thank you for your time and help!
Have a nice day!
Cheers Josh

2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.