Video won't display

[darias08]

Hello,

I tried to use the example code and I am not seeing any video displaying. I am using a FlatList so I am not sure if this will affect any issues. Here's how I have it set up:

import {
  VideoPlayer,
  DefaultMainControl,
  DefaultBottomControlsBar,
  videoId,
} from 'react_native_youtube_streamer';
import Video from 'react-native-video';

const MovieTrailers = props => {
  const [playing, setPlaying] = useState(true);

  const onStateChange = useCallback(state => {
    if (state === 'ended') {
      setPlaying(false);
    }
  }, []);

  return (
    <View>
      <ScrollView>
        <FlatList
          data={props.videoCover}
          keyExtractor={(item, index) => {
            return index.toString();
          }}
          showsHorizontalScrollIndicator={false}
          horizontal
          style={styles.FlatList}
          decelerationRate={0.8}
          disableIntervalMomentum={false}
          pagingEnabled={true}
          snapToAlignment={'start'}
          scrollEventThrottle={16}
          initialNumToRender={5}
          ListFooterComponent={() => <ItemSeparator width={70} />}
          renderItem={({item, index}) => {
            return (

              <VideoPlayer
                autoStart={false}
                mainControl={args => <DefaultMainControl {...args} />}
                bottomControl={args => <DefaultBottomControlsBar {...args} />}
                videoId="tsPSBLX1GPg" 
              >
                {args =>
                  args.youtubeCustomUrl && (
                    <Video
                      ref={args.playerRef}
                      source={{
                        uri: args.youtubeCustomUrl,
                      }}
                      style={styles.backgroundVideo}
                      resizeMode="stretch"
                      paused={args.videoPaused}
                      onLoad={args.onLoad}
                      onProgress={args.onProgress}
                      onEnd={args.onEnd}
                    />
                  )
                }
              </VideoPlayer>
            );
          }}
        />
      </ScrollView>
    </View>
  );
};

Also here's an error message stating when I try to use this block of code:

LOG calleingTogglecontrols LOG [SyntaxError: JSON Parse error: Unexpected token: <]

[darias08]

Also, I realize this is being used as typescript and I'm currently using .js

Is it still possible for me to use this code or no?

[staticGuru]

@darias08 Yes, you can use it with your .js file also. You just implement the <VideoPlayer/> component and pass the video Id to that component.``

[darias08]

I have tried that, but it leaves me stuck in a loading circle. It doesn't play the video at all.

I am not sure if you know what the error message means, but this is the error

LOG calleingTogglecontrols LOG [SyntaxError: JSON Parse error: Unexpected token: <]

[darias08]

<VideoPlayer
         autoStart={false}
        mainControl={args => <DefaultMainControl {...args} />}
          bottomControl={args => (
             <DefaultBottomControlsBar {...args} />
         )}
         videoId="tsPSBLX1GPg"
        >
            {args =>
                args.youtubeCustomUrl && (
                   <Video
                      ref={args.playerRef}
                     source={{
                      uri: args.youtubeCustomUrl,
             }}
                   style={styles.backgroundVideo}
                   resizeMode="stretch"
                    paused={args.videoPaused}
                    onLoad={args.onLoad}
                    onProgress={args.onProgress}
                    onEnd={args.onEnd}
             />
          )
         }
      </VideoPlayer>

This is how I have my code setup.

[rohankm]

even im not able to play the videos

[darias08]

Yeah, I tried everything. From setting it as a render() component to configuring some layout. All of them I have tried would just leave the video player in a loading animation and not playing the video. I am not sure if this is an android issue, or if this works on ios devices maybe.

Here's an example expo snack I created. Let me know if this link works. This is what I am experiencing when I try to install this npm.

https://snack.expo.dev/-qyivdp0f

[qiulegoh351]

Hi

I have tried that, but it leaves me stuck in a loading circle. It doesn't play the video at all.

I am not sure if you know what the error message means, but this is the error

LOG calleingTogglecontrols LOG [SyntaxError: JSON Parse error: Unexpected token: <]

Is anyone solve this issues?

[NeuVanessa]

any solution for this problem?