TheWidlarzGroup / react-native-video

A <Video /> component for react-native
https://docs.thewidlarzgroup.com/react-native-video/
MIT License
7.2k stars 2.9k forks source link

cannot get all of available resolution in HLS url #1843

Closed robbywh closed 4 years ago

robbywh commented 4 years ago

Bug

i tried to get all of available resolution in HLS url, but i only got one resolution

Sample HLS url : https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8

When i tried to get all of available resolution via onLoad, i only got this list of videoTracks :

[{"trackId":"1","codecs":"","bitrate":0,"height":720,"width":1152}]

but when i tried in DASH url, it is working fine

Sample DASH url : http://dash.edgesuite.net/envivio/EnvivioDash3/manifest.mpd

[{"trackId":"v1_257","codecs":"avc1.4D401E","bitrate":1200000,"height":432,"width":768},
{"trackId":"v2_257","codecs":"avc1.4D401E","bitrate":1850000,"height":576,"width":1024},
{"trackId":"v3_257","codecs":"avc1.4D401E","bitrate":2850000,"height":720,"width":1280},
{"trackId":"v4_257","codecs":"avc1.4D401E","bitrate":200000,"height":180,"width":320},
{"trackId":"v5_257","codecs":"avc1.4D401E","bitrate":300000,"height":180,"width":320},
{"trackId":"v6_257","codecs":"avc1.4D401E","bitrate":4300000,"height":720,"width":1280},
{"trackId":"v7_257","codecs":"avc1.4D401E","bitrate":5300000,"height":1080,"width":1920},
{"trackId":"v8_257","codecs":"avc1.4D401E","bitrate":480000,"height":288,"width":512},
{"trackId":"v9_257","codecs":"avc1.4D401E","bitrate":750000,"height":360,"width":640}]

Platform

Android Exoplayer

Environment info

React native info output:

System:
    OS: macOS 10.15.1
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Memory: 62.67 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 13.1.0 - /usr/local/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.12.1 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 22, 23, 24, 25, 26, 27, 28, 29
      Build Tools: 23.0.1, 23.0.2, 23.0.3, 25.0.0, 25.0.2, 26.0.2, 26.0.3, 27.0.3, 28.0.1, 28.0.2, 28.0.3, 29.0.2
      System Images: android-25 | Google APIs ARM 64 v8a, android-25 | Google APIs ARM EABI v7a, android-25 | Google APIs Intel x86 Atom, android-25 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5977832
    Xcode: 11.2.1/11B500 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.1 => 0.61.1
  npmGlobalPackages:
    react-native-cli: 2.0.1

Library version: 5.0.2

Steps To Reproduce

  1. pass url via source={{uri: "https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"}}
  2. log the onLoad payload onLoad={(payload) => console.log("PAYLOAD : "+JSON.stringify(payload.videoTracks))} ...

Expected behaviour

  1. get all of the available resolution

Reproducible sample code

<Video
        source={{uri: "https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"}}
        controls
        style={{flex: 1}}
        onLoad={(payload) => console.log("PAYLOAD : "+JSON.stringify(payload.videoTracks))}
      />

Video sample

https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8

mabudiman commented 4 years ago

is there any solution or workaround about this?

robbywh commented 4 years ago

hello @mabudiman , the problem arise because i implement IMA SDK with preroll ads, i think it will work normally, if you use standard react-native-video

arslan-akh commented 4 years ago

Hello, @RobbyWH is it possible to use hls videoTracks with IMA SDK? I have same problem with exoplayer, I get all data from onLoad event except videoTracks

robbywh commented 4 years ago

hello @arslan-akh , it is possible if you implement IMA SDK without preroll ads

but if you implement IMA SDK with preroll ads, you must use third party library like https://github.com/shinnn/parse-m3u8

because if the ads play in the preroll, the react-native-video cannot load the original videoTracks data

sannjayy commented 2 years ago

Hello, @RobbyWH is it possible to use hls videoTracks with IMA SDK? I have same problem with exoplayer, I get all data from onLoad event except videoTracks

Facing the same issue, how can i resolve it?