search

TheWidlarzGroup / react-native-video

A <Video /> component for react-native
http://thewidlarzgroup.github.io/react-native-video/
MIT License
7.15k stars 2.88k forks source link

Video now loaded #2236

Closed carneirocorp closed 2 years ago

carneirocorp commented 3 years ago

Bug

On iOS 14+ phones the player is shown with a black background but no video is loaded. Neither error, alert or video player controls is shown. On Android + iOS <14 works perfectly.

Platform

Environment info

  "dependencies": {
    "@react-native-community/async-storage": "^1.7.0",
    "@react-native-community/cameraroll": "^1.7.2",
    "@react-native-community/push-notification-ios": "^1.0.5",
    "@react-native-firebase/analytics": "^10.0.0",
    "@react-native-firebase/app": "^10.0.0",
    "@react-native-firebase/messaging": "^10.0.0",
    "@react-navigation/core": "^3.5.1",
    "@react-navigation/material-top-tabs": "^5.0.0-alpha.18",
    "@sentry/react-native": "^1.3.3",
    "add": "^2.0.6",
    "appcenter": "3.1.2",
    "appcenter-analytics": "3.1.2",
    "appcenter-crashes": "3.1.2",
    "async-validator": "^3.2.3",
    "axios": "^0.19.0",
    "link-preview-js": "^2.0.4",
    "lodash": "^4.17.15",
    "moment": "^2.24.0",
    "prop-types": "^15.7.2",
    "react": "16.9.0",
    "react-devtools": "^3.6.3",
    "react-native": "0.61.5",
    "react-native-add-calendar-event": "^3.0.0",
    "react-native-alphabet-sectionlist": "0.0.4",
    "react-native-appstore-version-checker": "^3.0.0",
    "react-native-autolink": "^1.9.2",
    "react-native-background-timer": "^2.4.1",
    "react-native-calendars": "^1.403.0",
    "react-native-datepicker": "^1.7.2",
    "react-native-device-info": "^5.3.1",
    "react-native-dialog": "^5.6.0",
    "react-native-document-picker": "^3.3.3",
    "react-native-dotenv": "^0.2.0",
    "react-native-draggable": "^3.3.0",
    "react-native-elements": "^1.2.7",
    "react-native-fullscreen-video": "0.0.9",
    "react-native-gesture-handler": "^1.5.1",
    "react-native-get-location": "^1.4.2",
    "react-native-grid-list": "^1.1.0",
    "react-native-image-crop-picker": "^0.28.0",
    "react-native-image-picker": "^2.0.0",
    "react-native-image-zoom-viewer": "^2.2.27",
    "react-native-inappbrowser-reborn": "^3.3.4",
    "react-native-keyboard-aware-scroll-view": "^0.9.1",
    "react-native-keychain": "^6.1.1",
    "react-native-location": "^2.5.0",
    "react-native-map-link": "^2.7.3",
    "react-native-masked-text": "^1.13.0",
    "react-native-material-dropdown": "^0.11.1",
    "react-native-media-controls": "^2.0.3",
    "react-native-open-map": "^3.0.2",
    "react-native-open-maps": "^0.3.5",
    "react-native-orientation": "^3.1.3",
    "react-native-permissions": "^2.1.5",
    "react-native-progress": "^4.1.0",
    "react-native-push-notification": "^3.1.9",
    "react-native-reanimated": "^1.4.0",
    "react-native-render-html": "^4.2.0",
    "react-native-screens": "^1.0.0-alpha.23",
    "react-native-slider": "^0.11.0",
    "react-native-snackbar": "^2.0.4",
    "react-native-snap-carousel": "^3.8.4",
    "react-native-svg": "^9.13.3",
    "react-native-tab-view": "^2.11.0",
    "react-native-toasty": "^1.0.2",
    "react-native-touch-id": "^4.4.1",
    "react-native-url-preview": "^1.1.8",
    "react-native-vector-icons": "^6.6.0",
    "react-native-video": "^4.4.5",
    "react-native-webview": "^7.6.0",
    "react-navigation": "^4.0.10",
    "react-navigation-tabs": "^2.6.0",
    "react-redux": "^7.1.3",
    "reactotron-react-native": "^4.0.2",
    "reactotron-redux": "^3.1.2",
    "reactotron-redux-saga": "^4.2.3",
    "redux": "^4.0.4",
    "redux-saga": "^1.1.3",
    "redux-thunk": "^2.3.0",
    "rn-bottom-drawer": "^1.4.3",
    "rn-fetch-blob": "^0.12.0",
    "rn-floating-video-widget": "0.0.4"
  },
  "devDependencies": {
    "@babel/core": "7.7.4",
    "@babel/runtime": "7.7.4",
    "@react-native-community/eslint-config": "0.0.5",
    "babel-jest": "24.9.0",
    "eslint": "6.7.1",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-html": "^5.0.3",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.4",
    "eslint-plugin-react-hooks": "^1.3.0",
    "jest": "24.9.0",
    "jetifier": "^1.6.4",
    "metro-react-native-babel-preset": "0.56.3",
    "prettier": "^1.16.4",
    "react-native-clean-project": "^3.3.0",
    "react-test-renderer": "16.9.0"
  },

Library version: 4.4.5

Steps To Reproduce

  1. On app, access a page with a video in the content.
  2. The video player is not shown, just a black box with no controls.

Expected behaviour

  1. On app, access a page with a video in the content.
  2. The video player is shown, with the controls avaliable to play the video.

Reproducible sample code

import {
  ActivityIndicator,
  BackHandler,
  Dimensions,
  Keyboard,
  Linking,
  Platform,
  SafeAreaView,
  StatusBar,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import {Card, Divider, Image, Input} from 'react-native-elements';
import MediaControls, {PLAYER_STATES} from 'react-native-media-controls';
import React, {Component} from 'react';
import {color, styles} from '../config/Styles';

import BottomNavigator from '../components/BottomNavigator';
import Draggable from 'react-native-draggable';
import Header from '../components/Header';
import Icon from 'react-native-vector-icons/FontAwesome5';
import Loader from '../components/Loader';
import Orientation from 'react-native-orientation';
import PropTypes from 'prop-types';
import {ScrollView} from 'react-native-gesture-handler';
import Spacer from '../components/Spacer';
import TAG from '../config/FirebaseAnalyticsConfig';
import Video from 'react-native-video';
import analytics from '@react-native-firebase/analytics';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {getDetailOfMyPlan} from '../actions/Plan';

class KnowYourPlan extends Component {
  static propTypes = {
    navigation: PropTypes.shape({navigate: PropTypes.func}).isRequired,
  };

  constructor(props) {
    super(props);
    this.state = {
      currentTime: 0,
      duration: 0,
      floating: false,
      granted: false,
      isFullScreen: false,
      isLoading: true,
      loading: false,
      orientation: 'PORTRAIT',
      paused: true,
      pictureInPicture: false,
      query: '',
      screenType: 'content',
      videos: [],
      videoURL: '',
    };
  }

  componentWillMount() {
    Orientation.getInitialOrientation();
  }

  componentDidMount() {
    this.backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      this.handleBackPress,
    );
    this.trackScreenView('Conheça Seu Plano');
    Orientation.lockToPortrait();
    Orientation.addOrientationListener(this._orientationDidChange);
    this.getData();
  }

  _orientationDidChange = orientation => {
    this.setState({orientation});
  };

  componentWillUnmount() {
    this.backHandler.remove();
    Orientation.removeOrientationListener(this._orientationDidChange);
  }

  handleBackPress = () => {
    const {navigation, plan} = this.props;
    const {kind} = plan;
    const {navigate} = navigation;
    const {state} = navigation;
    const {params} = state;
    const {id} = params;

    const route = {
      Odonto: 'Plan',
      Previdência: 'PrevidencyPlan',
      Saúde: 'Plan',
      Vida: 'LifePlan',
    };

    console.log('id: ');
    console.log(id);

    navigate(route[kind], {cameFrom: 'KnowYourPlan', id});
    return true;
  };

  trackScreenView = async screen => {
    console.log('Screen::' + screen);
    await analytics().logScreenView({
      screen_class: screen,
      screen_name: screen,
    });
  };

  setFirebaseEvent = async event => {
    await analytics().logEvent(event);
  };

  getData = async () => {
    const {navigation, user} = this.props;
    const {state} = navigation;
    const {params} = state;
    const {id: planId} = params;
    const {id: userId} = user || {};
    const {getDetailOfMyPlan: requestMyPlans} = this.props;

    this.setState({loading: true, planId});
    await requestMyPlans(userId, planId);
    this.setState({loading: false});

    this.setVideos();
  };

  setVideos = () => {
    const {plan} = this.props;
    const {about_your_plans} = plan;

    this.setState({videos: about_your_plans});
  };

  filterVideos = () => {
    const {query} = this.state;
    const {plan} = this.props;
    const {about_your_plans} = plan || {};

    this.setState({videos: about_your_plans});

    if (query) {
      const videos = about_your_plans;
      const filter = videos.filter(item => {
        const title = item.title
          .normalize('NFD')
          .replace(/([\u0300-\u036f]|[^0-9a-zA-Z])/g, ' ');
        const description = item.description
          .normalize('NFD')
          .replace(/([\u0300-\u036f]|[^0-9a-zA-Z])/g, ' ');
        const words = title
          .toLowerCase()
          .split(' ')
          .concat(description.toLowerCase().split(' '));
        const queryWords = query.toLowerCase().split(' ');
        const results = words.filter(value => queryWords.includes(value));
        const startsWith =
          item.title.toLowerCase().startsWith(query.toLowerCase()) ||
          item.description.toLowerCase().startsWith(query.toLowerCase());

        return results.length || startsWith;
      });

      this.setState({videos: filter});
    } else {
      this.setState({videos: about_your_plans});
    }

    Keyboard.dismiss();
  };

  onSeek = seek => {
    //Handler for change in seekbar
    this.videoPlayer.seek(seek);
  };

  onPaused = playerState => {
    //Handler for Video Pause

    this.setState({
      paused: !this.state.paused,
      playerState,
    });
  };

  onReplay = () => {
    //Handler for Replay
    this.setState({playerState: PLAYER_STATES.PLAYING});
    this.videoPlayer.seek(0);
  };

  onProgress = data => {
    const {isLoading, playerState} = this.state;
    // Video Player will continue progress even if the video already ended
    if (!isLoading && playerState !== PLAYER_STATES.ENDED) {
      this.setState({currentTime: data.currentTime});
    }
  };

  onLoad = data => this.setState({duration: data.duration, isLoading: false});

  onLoadStart = data => this.setState({isLoading: true});

  onEnd = () => this.setState({playerState: PLAYER_STATES.ENDED});

  onError = error => console.log('Oh! ', error);

  exitFullScreen = () => {
    this.setState({floating: true});
  };

  enterFullScreen = () => {};

  onFullScreen = () => {
    if (!this.state.isFullScreen) {
      Orientation.unlockAllOrientations();
      this.setState({floating: false, isFullScreen: true, screenType: 'cover'});
    } else {
      Orientation.lockToPortrait();
      this.setState({
        floating: true,
        isFullScreen: false,
        screenType: 'content',
      });
    }
  };
  renderToolbar = () => (
    <View>
      <Text> toolbar </Text>
    </View>
  );

  onSeeking = currentTime => this.setState({currentTime});

  renderVideo = () => {
    return (
      <Draggable
        x={24}
        y={24}
        minX={24}
        minY={24}
        maxX={styles.containerScreenWidth.width + 24}
        maxY={Dimensions.get('screen').height - 200}
        renderSize={56}
        renderColor="black"
        isCircle>
        <View
          style={[
            styles.containerScreenWidth,
            styles.customHeight(200),
            styles.bgColor(color.dark),
          ]}>
          <TouchableOpacity
            style={styles.closeVideo}
            onPress={() => {
              this.setState({
                videoURL: '',
                floating: false,
                paused: true,
              });
            }}>
            <Text>x</Text>
          </TouchableOpacity>
          <Video
            style={styles.mediaPlayer}
            onLoad={this.onLoad}
            onLoadStart={this.onLoadStart}
            onProgress={this.onProgress}
            onEnd={this.onEnd}
            paused={this.state.paused}
            ref={videoPlayer => (this.videoPlayer = videoPlayer)}
            resizeMode={this.state.screenType}
            source={{
              uri: this.state.videoURL,
            }}
            controls={Platform.OS === 'ios'}
            fullscreen={this.state.isFullScreen}
            fullscreenAutorotate={true}
            volume={10}
          />

          {Platform.OS === 'android' && (
            <MediaControls
              duration={this.state.duration}
              isLoading={this.state.isLoading}
              mainColor={color.primary}
              onFullScreen={this.onFullScreen}
              onPaused={this.onPaused}
              onReplay={this.onReplay}
              onSeek={this.onSeek}
              onSeeking={this.onSeeking}
              playerState={this.state.playerState}
              progress={this.state.currentTime}
              toolbar={this.renderToolbar()}
            />
          )}
        </View>
      </Draggable>
    );
  };

  renderFullScreen() {
    return (
      <View style={styles.blackOverflow}>
        <View style={styles.videoContainer}>
          <Video
            onEnd={this.onEnd}
            onLoad={this.onLoad}
            onLoadStart={this.onLoadStart}
            onProgress={this.onProgress}
            paused={this.state.paused}
            ref={videoPlayer => (this.videoPlayer = videoPlayer)}
            resizeMode={
              this.state.orientation === 'PORTRAIT'
                ? 'content'
                : this.state.screenType
            }
            onFullScreen={this.state.isFullScreen}
            source={{uri: this.state.videoURL}}
            style={styles.mediaPlayer}
            volume={10}
          />
          <MediaControls
            duration={this.state.duration}
            isLoading={this.state.isLoading}
            mainColor={color.primary}
            onFullScreen={this.onFullScreen}
            onPaused={this.onPaused}
            onReplay={this.onReplay}
            onSeek={this.onSeek}
            onSeeking={this.onSeeking}
            playerState={this.state.playerState}
            progress={this.state.currentTime}
            toolbar={this.renderToolbar()}
          />
        </View>
      </View>
    );
  }

  render() {
    const {navigation, plan} = this.props;
    const {loading, query, videos, floating, isFullScreen} = this.state;
    const {navigate} = navigation;
    const {state} = navigation;
    const {params} = state;
    const {id} = params;

    const {plan_diferentials, kind, insurer_name: subtitle} = plan || {};

    const route = {
      Odonto: 'Plan',
      Previdência: 'PrevidencyPlan',
      Saúde: 'Plan',
      Vida: 'LifePlan',
    };

    return (
      <>
        <StatusBar backgroundColor="transparent" translucent />
        {isFullScreen && this.renderFullScreen()}
        <Header
          title={`Conheça seu Plano - ${kind}`}
          onback={() => navigate(route[kind], {cameFrom: 'KnowYourPlan', id})}
        />
        <SafeAreaView style={[styles.bodyAreaWithNavigatorsTB]}>
          {floating && Platform.OS === 'android' ? this.renderVideo() : null}

          {floating && Platform.OS === 'ios' ? (
            <View style={styles.overComponent}>{this.renderVideo()}</View>
          ) : null}

          <View style={styles.sectionContainer}>
            <View>
              <Input
                placeholder="Pesquisar..."
                rightIcon={
                  <Icon
                    name="search"
                    size={16}
                    color="grey"
                    onPress={() => {
                      this.setFirebaseEvent(TAG.KNOW_YOUR_PLAN_FILTER_VIDEO);
                      this.filterVideos();
                    }}
                  />
                }
                rightIconContainerStyle={styles.inputSearchIcon}
                containerStyle={styles.inputSearch}
                inputContainerStyle={styles.inputSearchContainer}
                onChangeText={v => this.setState({query: v})}
                value={query}
                onEndEditing={() => {
                  this.setFirebaseEvent(TAG.KNOW_YOUR_PLAN_FILTER_VIDEO);
                  this.filterVideos();
                }}
              />
            </View>

            <Spacer mb={12} mt={12}>
              <Divider />
            </Spacer>

            <TouchableOpacity
              style={[styles.bgColor(color.white), styles.customPadding(14)]}
              onPress={() => {
                this.setFirebaseEvent(TAG.KNOW_YOUR_PLAN_TO_COVERAGE);
                if (kind === 'Vida' || kind === 'Previdência') {
                  navigate('PlanDetail', {plan});
                }
              }}>
              <View style={styles.viewHorizontal('flex-start', 'center')}>
                <View
                  style={[
                    styles.column(
                      Dimensions.get('screen').width <= 380 ? 4 : 3.6,
                    ),
                    styles.cardHighlight,
                  ]}>
                  <View style={[styles.viewVertical('center', 'center')]}>
                    <View styles={styles.customHeight(40)}>
                      {kind === 'Saúde' || kind === 'Odonto' ? (
                        <View>
                          {Dimensions.get('screen').width <= 380 ? (
                            <Text
                              style={[
                                styles.redColor,
                                styles.boldText,
                                styles.customFontSize(8),
                              ]}>
                              COBERTURAS
                            </Text>
                          ) : (
                            <Text
                              style={[
                                styles.redColor,
                                styles.boldText,
                                styles.customFontSize(12),
                              ]}>
                              COBERTURAS
                            </Text>
                          )}
                        </View>
                      ) : null}

                      {kind === 'Vida' || kind === 'Previdência' ? (
                        <View>
                          {Dimensions.get('screen').width <= 380 ? (
                            <View>
                              <Text
                                style={[
                                  styles.redColor,
                                  styles.boldText,
                                  styles.customFontSize(8),
                                ]}>
                                INFORMAÇÕES
                              </Text>
                              <Text
                                style={[
                                  styles.redColor,
                                  styles.boldText,
                                  styles.customFontSize(8),
                                ]}>
                                DO PLANO
                              </Text>
                            </View>
                          ) : (
                            <View>
                              <Text
                                style={[
                                  styles.redColor,
                                  styles.boldText,
                                  styles.customFontSize(12),
                                ]}>
                                INFORMAÇÕES
                              </Text>
                              <Text
                                style={[
                                  styles.redColor,
                                  styles.boldText,
                                  styles.customFontSize(12),
                                ]}>
                                DO PLANO
                              </Text>
                            </View>
                          )}
                        </View>
                      ) : null}
                    </View>
                  </View>
                </View>
                <View style={styles.column(1.3)}>
                  {kind === 'Saúde' || kind === 'Odonto' ? (
                    <View>
                      <Text style={styles.label(color.tertiary)}>
                        As coberturas do seu plano estão de acordo com o ROL de
                        procedimento da Agencia Nacional de Saúde Suplementar,
                        para saber mais, clique aqui:{' '}
                        <Text
                          style={styles.textColor(color.blue)}
                          onPress={() => {
                            this.setFirebaseEvent(
                              TAG.KNOW_YOUR_PLAN_TO_COVERAGE,
                            );
                            Linking.openURL('https://www.ans.gov.br');
                          }}>
                          www.ans.gov.br
                        </Text>
                      </Text>
                    </View>
                  ) : null}

                  {kind === 'Vida' || kind === 'Previdência' ? (
                    <View>
                      <Text style={styles.label(color.tertiary)}>
                        Clique e saiba mais informações do seu plano.
                        <Text style={styles.textColor(color.blue)}>
                          {' '}
                          ⓘ{'  '}
                        </Text>
                      </Text>
                    </View>
                  ) : null}
                </View>
              </View>
            </TouchableOpacity>

            {plan_diferentials && <Spacer mb={12} />}

            {plan_diferentials && plan_diferentials.length ? (
              <TouchableOpacity
                style={[styles.bgColor(color.white), styles.customPadding(14)]}
                onPress={() => {
                  this.setFirebaseEvent(TAG.KNOW_YOUR_PLAN_TO_DIFFERENTIALS);
                  navigate('PlanDifferentials', {plan});
                }}>
                <View style={styles.viewHorizontal('flex-start', 'center')}>
                  <View
                    style={[
                      styles.column(
                        Dimensions.get('screen').width <= 380 ? 4 : 3.6,
                      ),
                      styles.cardHighlight,
                    ]}>
                    <View style={[styles.viewVertical('center', 'center')]}>
                      <View styles={styles.customHeight(40)}>
                        {Dimensions.get('screen').width <= 380 ? (
                          <View>
                            <Text
                              style={[
                                styles.redColor,
                                styles.boldText,
                                styles.customFontSize(8),
                              ]}>
                              DIFERENCIAIS
                            </Text>
                            <Text
                              style={[
                                styles.redColor,
                                styles.boldText,
                                styles.customFontSize(8),
                              ]}>
                              DO PLANO
                            </Text>
                          </View>
                        ) : (
                          <View>
                            <Text
                              style={[
                                styles.redColor,
                                styles.boldText,
                                styles.customFontSize(12),
                              ]}>
                              DIFERENCIAIS
                            </Text>
                            <Text
                              style={[
                                styles.redColor,
                                styles.boldText,
                                styles.customFontSize(12),
                              ]}>
                              DO PLANO
                            </Text>
                          </View>
                        )}
                      </View>
                    </View>
                  </View>
                  <View style={styles.column(1.3)}>
                    <View>
                      <Text style={styles.label(color.tertiary)}>
                        Clique e saiba os diferenciais do seu plano
                        <Text style={styles.textColor(color.blue)}>
                          {'  '} ⓘ{'  '}
                        </Text>
                      </Text>
                    </View>
                  </View>
                </View>
              </TouchableOpacity>
            ) : null}

            <Spacer mt={12} />
            <Divider />
          </View>
          <ScrollView>
            <View>
              <Spacer mb={12} />
              {videos && videos.length ? (
                <View>
                  <View style={styles.viewHorizontal('center')}>
                    <Text
                      style={[
                        styles.redColor,
                        styles.boldText,
                        styles.customFontSize(12),
                      ]}>
                      CLIQUE NO VÍDEO
                    </Text>
                  </View>
                  <View style={styles.viewHorizontal('center')}>
                    <Text
                      style={[
                        styles.redColor,
                        styles.boldText,
                        styles.customFontSize(12),
                      ]}>
                      DESEJADO PARA ASSISTIR
                    </Text>
                  </View>
                </View>
              ) : null}

              {videos &&
                videos.map(item => {
                  return (
                    <Card keyExtractor={(i, k) => String('KYPL' + k)}>
                      <TouchableOpacity
                        onPress={() => {
                          this.setFirebaseEvent(TAG.KNOW_YOUR_PLAN_WATCH_VIDEO);
                          this.setState({
                            videoURL: item.url,
                            floating: true,
                          });
                        }}>
                        <Image
                          PlaceholderContent={<ActivityIndicator />}
                          source={{
                            uri:
                              item.poster && item.poster.url
                                ? item.poster.url
                                    .replace('http://', 'https://')
                                    .replace('httpss', 'https')
                                : 'https://ak.picdn.net/shutterstock/videos/1040317136/thumb/10.jpg?ip=x480',
                          }}
                          style={[
                            styles.customWidth('100%'),
                            styles.customHeight(200),
                          ]}
                        />
                      </TouchableOpacity>
                      <Divider />
                      <View
                        style={styles.viewHorizontal('flex-start', 'center')}>
                        <View>
                          <Spacer mt={12} />
                          <Text style={[styles.boldText]}>{item.title}</Text>
                          <Spacer mt={8} />
                          <Text style={styles.label(color.secondary)}>
                            {subtitle}
                          </Text>

                          <Spacer mt={8} />
                          <Text style={styles.label(color.secondary)}>
                            {item.description}
                          </Text>
                        </View>
                      </View>
                    </Card>
                  );
                })}
            </View>
            <Spacer mt={220} />
          </ScrollView>
        </SafeAreaView>
        {!isFullScreen && <BottomNavigator navigation={navigation} />}

        {loading ? <Loader /> : null}
      </>
    );
  }
}

const mapStateToProps = state => ({
  plan: state.plan.planData,
  requestInfo: state.plan,
  user: state.user.userData,
});

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      getDetailOfMyPlan,
    },
    dispatch,
  );

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(KnowYourPlan);

Video sample

https://player.vimeo.com/external/442737739.hd.mp4?s=d6fc1ac1171b4a950f0224e7729844569b23ccf1&profile_id=175

lsnow99 commented 3 years ago

Does this bug happen immediately when you first open the app? Or does it only happen after a certain amount of time? Also, is the onLoad function ever called for you?

I am experiencing similar issues when loading a .mp4

Pandazaur commented 3 years ago

Hello I had an issue, difficult to find out why. I added a onError={...} callback on my video player to catch the error. It might help