0

I am developing an application capable of playing an IPTV list. All the contents are in mkv format and most are reproduced correctly but in some the image remains black while the sound is heard.

This is the metadata of the video:

{
  "audioTracks": Array [
    Object {
      "bitrate": "",
      "index": 0,
      "language": "und",
      "title": "2",
      "type": "audio/mpeg",
    },
  ],
  "canPlayFastForward": true,
  "canPlayReverse": true,
  "canPlaySlowForward": true,
  "canPlaySlowReverse": true,
  "canStepBackward": true,
  "canStepForward": true,
  "currentTime": 0,
  "duration": 7097.049,
  "naturalSize": Object {
    "height": 0,
    "orientation": "portrait",
    "width": 0,
  },
  "textTracks": Array [],
  "trackId": "-1",
  "videoTracks": Array [
    Object {
      "bitrate": 0,
      "codecs": "",
      "height": 404,
      "trackId": "1",
      "width": 720,
    },
  ],
}

This is the code I use with the react-native-video library:

<Video
        key={keyload}
        ref={(ref) => {setVideo(ref)}}
        style={styles.video}
        onLoad={(data) => setMetadata(data)}//
        source={{
          uri: uriLoad, initOptions: ['--codec=avcodec']
        }}
        onProgress={progress => {setProgress(progress.currentTime)}}
        controls={false}
        fullscreen={true}
        paused={paused}
        volume={volumen}
        fullscreenAutorotate={true}
        selectedVideoTrack={videoTrack}
        selectedAudioTrack={audioTrack}
        selectedTextTrack={textTrack}
        resizeMode={resizemode}
        onEnd={() => end()}
        isLooping 
        onError={error => playerError(error)}
        onPlaybackStatusUpdat
        allowsExternalPlayback
        e={status => setStatus(() => status)}//setStatus(() => status)
    />

package.json

{
  "name": "someiptv",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-community/slider": "4.2.3",
    "@react-navigation/native": "^6.0.12",
    "@react-navigation/native-stack": "^6.8.0",
    "expo": "~46.0.9",
    "expo-av": "~12.0.4",
    "expo-font": "~10.2.0",
    "expo-linear-gradient": "~11.4.0",
    "expo-screen-orientation": "~4.3.0",
    "expo-splash-screen": "~0.16.2",
    "expo-sqlite": "~10.3.0",
    "expo-status-bar": "~1.4.0",
    "lodash.filter": "^4.6.0",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-native": "0.69.5",
    "react-native-marquee": "^0.4.0",
    "react-native-paper": "^5.0.0-rc.4",
    "react-native-safe-area-context": "4.3.1",
    "react-native-screens": "~3.15.0",
    "react-native-system-setting": "^1.7.6",
    "react-native-video": "^6.0.0-alpha.3",
    "react-native-web": "~0.18.7",
    "react-navigation": "^4.4.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

I have tried with different versions of the library and with different buffer configurations, but nothing works. Does anyone know why this error occurs and how to fix it? Thanks.

Arekjaar
  • 51
  • 5
  • same issue did you solved it ? – Zeeshan Ali Feb 01 '23 at 11:18
  • Hello, Yes, I solved it by incorporating the react-native-vlc-media-player library and combining it with the react-native-video library. I leave you a link where they explain how to combine these libraries. https://medium.com/react-native-expo/the-perfect-player-with-react-native-video-react-native-vlc-media-player-d5104e85df69 – Arekjaar Feb 02 '23 at 16:22

0 Answers0