react-nativem3u8react-native-videoaws-media-convert

Android react-native-video doesn't playback in m3u8 video


  1. My problem is I can't playback m3u8 fragmented video through react-native-video. But another test m3u8 from different resources does work. I have thought my transcoded CMAF m3u8 is corrupted and by that reason doesn't work but it work on ios through react-native-video and i have tried to test it through demo.theoplayer and it works right.

  2. I do transcode from mp4 to CMAF m3u8 through AWS MediaConvert create job template and configure some settings.

  3. My code is quite simple:

<Video
   style={{ flex: 1, backgroundColor: 'black' }}
   source={{uri: 'https://d7m8ah93fnh1v.cloudfront.net/media/ROOM/03bc46a8-eb9f-4f94-950e-55da3c9b4a77/567e932f-d964-43c5-8866-247a9e777d35/567e932f-d964-43c5-8866-247a9e777d35.m3u8'}} 
/>


Solution

  • Our suggestion is to determine if this is a stream formatting issue or a player side issue. To do this we suggest validating the stream with Apple's 'stream validator' tool, part of the 'HLS tools' package available from the Apple website. We also recommend checking the playback of the stream in other players such as JWplayer, Shaka player, etc. FYI I tried your source URL in the bitmovin test player and hls.js, and it plays fine for me in both.

    If the playback issue is specific to react-native video player (which seems likely) then there are two paths to pursue: [a] open a bug with react team; and [b] check recommended settings for react player, then experiment with modifying your encoding settings to produce a stream react player will handle without issue.