Having trouble using react-native-video on react-native-tvos@^0.63.4-0

Question

Bug

We are using this library to build an application for AndroidTV which is heavily relied on Video streaming , so we decided to use this library and see how it goes.

we only use HLS (m3u8) video formats for the application.

we used ExoPlayer and everything seemed to be fine , but when users started installing the application on off-brand AndroidBoxes , we got flooded with bug reports with all of them consisting of one particular problem , "Video player is not working". we started debuggin on multiple devices , including Android Phones , AndroidTVs , Amazon Fire Stick and android boxes.

we debugged using both ExoPlayer and MediaPlayer for some devices.

• and the result that we got is this :
  • Android Phone: both the ExoPlayer And MediaPlayer worked fine.
  • AndroidTV: ExoPlayer worked fine but when we tried to use MediaPlayer the video started getting desynced.
  • Amazon Fire Stick: ExoPlayer worked fine. (did not test using MediaPlayer)
  • Android Box: ExoPlayer did not work correctly , problems included 2x speed while we set it to 1 manually , having no sound and not working entirely. MediaPlayer on the other hand , seemed to work at first but after 30-40 minutes of use it`d be glitchy and run the video at 2 FPS.

Platform

Which player are you experiencing the problem on:

• Android ExoPlayer
• Android MediaPlayer

Environment info

React native info output:

System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz 
    Memory: 3.36 GB / 11.90 GB
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE       
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Version  4.1.0.0 AI-201.8743.12.41.7042882
    Visual Studio: 16.5.30011.22 (Visual Studio Community 2019)
  Languages:
    Java: 1.8.0_282 - /c/Program Files/OpenJDK/openjdk-8u282-b08/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: Not Found
    react-native-tvos:  0.63.4-0
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Library version: ^5.1.1

Steps To Reproduce

1. run react-native init TestApp --template=react-native-tvos .
2. run npm i react-native-video .
3. give the <Video /> an HLS type video.
4. run react-native run-android --variable=release and install the apk file on the target platform.

Expected behaviour

A solution or fix to Play the video smoothly on TV platforms .

I opened an issue regarding this problem at the react-native-video github here.

Answer 1

It seemed like our problem was with the encoding of our files, which made HLS files unstable. If you want to use HLS in your app, make sure your encodings are standard and work on older devices.