HLS Stream working with plyr-react but not custom-hls-player

Question

HLS Stream working with plyr-react but not custom-hls-player

Opened this issue 2 years ago · 1 comments

Describe the bug
Working CloudFlare HLS stream (in order players), does not work in custom HLS player.

To Reproduce
Copied v5.1.2 into CodeSandbox as a working example.

However, I have hlsSource changed to point to another CloudFlare HLS stream.
This stream even works in plyr-react until you use the custom hls player.

On first load:

The video never seems to load
Console has this error: Assertion failed: Initial audio track should be selected when tracks are known

On choosing a quality:

video does load and is playable
there is no audio at all

Perhaps it has something to do with this streams format that this custom hls player just needs to support?

Expected behavior
Should play, without error, the same as the example stream.

Screenshots

Desktop (please complete the following information):

OS: macOS 12.6.1 (21G217)
Browser: Chrome
Version: Version 108.0.5359.98 (Official Build) (x86_64)

Additional context
Original Example Stream - Root Manifest:
https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8

#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2149280,CODECS="mp4a.40.2,avc1.64001f",RESOLUTION=1280x720,NAME="720"
url_0/193039199_mp4_h264_aac_hd_7.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=246440,CODECS="mp4a.40.5,avc1.42000d",RESOLUTION=320x184,NAME="240"
url_2/193039199_mp4_h264_aac_ld_7.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=460560,CODECS="mp4a.40.5,avc1.420016",RESOLUTION=512x288,NAME="380"
url_4/193039199_mp4_h264_aac_7.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=836280,CODECS="mp4a.40.2,avc1.64001f",RESOLUTION=848x480,NAME="480"
url_6/193039199_mp4_h264_aac_hq_7.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=6221600,CODECS="mp4a.40.2,avc1.640028",RESOLUTION=1920x1080,NAME="1080"
url_8/193039199_mp4_h264_aac_fhd_7.m3u8

Original Example Stream - Single Quality:
https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-PLAYLIST-TYPE:VOD
#EXT-X-TARGETDURATION:11
#EXTINF:10.000,
url_590/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_591/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_592/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_593/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_594/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_595/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_596/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:9.933,
url_597/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.067,
url_598/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_599/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_600/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_601/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_602/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_603/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_604/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_605/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_606/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_607/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_608/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_609/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_610/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_611/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_612/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_613/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_614/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_615/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_616/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_617/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_618/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:9.933,
url_619/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.067,
url_620/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_621/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_622/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_623/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_624/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_625/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_626/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_627/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_628/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_629/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_630/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_631/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_632/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:9.933,
url_633/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.067,
url_634/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_635/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_636/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_637/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_638/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_639/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_640/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_641/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_642/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_643/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_644/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_645/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_646/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_647/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_648/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_649/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_650/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_651/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:10.000,
url_652/193039199_mp4_h264_aac_fhd_7.ts
#EXTINF:4.567,
url_653/193039199_mp4_h264_aac_fhd_7.ts
#EXT-X-ENDLIST

Additional context
Original Example Stream - Root Manifest:
https://customer-owvx6b16l43yw5ic.cloudflarestream.com/9dcabaa1fe72bb87dc4866adca405f1e/manifest/video.m3u8

#EXTM3U
#EXT-X-VERSION:6
#EXT-X-INDEPENDENT-SEGMENTS
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="group_audio",NAME="original",LANGUAGE="en-20",DEFAULT=YES,AUTOSELECT=YES,URI="stream_t2_r999999999.m3u8"
#EXT-X-STREAM-INF:RESOLUTION=1280x720,CODECS="avc1.64001f,mp4a.40.2",BANDWIDTH=1378546,AVERAGE-BANDWIDTH=440056,FRAME-RATE=30.000,AUDIO="group_audio"
stream_t1_r3.m3u8
#EXT-X-STREAM-INF:RESOLUTION=1920x1080,CODECS="avc1.640028,mp4a.40.2",BANDWIDTH=5575651,AVERAGE-BANDWIDTH=4526638,FRAME-RATE=30.000,AUDIO="group_audio"
stream_t1_r4.m3u8
#EXT-X-STREAM-INF:RESOLUTION=854x480,CODECS="avc1.64001e,mp4a.40.2",BANDWIDTH=1171614,AVERAGE-BANDWIDTH=961110,FRAME-RATE=30.000,AUDIO="group_audio"
stream_t1_r2.m3u8
#EXT-X-STREAM-INF:RESOLUTION=640x360,CODECS="avc1.4d401e,mp4a.40.2",BANDWIDTH=725139,AVERAGE-BANDWIDTH=613873,FRAME-RATE=30.000,AUDIO="group_audio"
stream_t1_r1.m3u8
#EXT-X-STREAM-INF:RESOLUTION=426x240,CODECS="avc1.42c015,mp4a.40.2",BANDWIDTH=627108,AVERAGE-BANDWIDTH=383072,FRAME-RATE=30.000,AUDIO="group_audio"
stream_t1_r0.m3u8

Original Example Stream - Single Quality:
https://customer-owvx6b16l43yw5ic.cloudflarestream.com/9dcabaa1fe72bb87dc4866adca405f1e/manifest/stream_t1_r4.m3u8

#EXTM3U
#EXT-X-VERSION:6
#EXT-X-MEDIA-SEQUENCE:14050
#EXT-X-TARGETDURATION:6
#EXT-X-MAP:URI="../../81a0b5a7937546d4905212d0400e3860/video/1080/init.mp4?p=eyJ0eXBlIjoiaW5pdCIsInZpZGVvSUQiOiI4MWEwYjVhNzkzNzU0NmQ0OTA1MjEyZDA0MDBlMzg2MCIsIm93bmVySUQiOjQ2MDA2NjE4LCJjcmVhdG9ySUQiOiIiLCJ1c2VWT0RPVEZFIjpmYWxzZSwidHJhY2siOiIxIiwicmVuZGl0aW9uIjoiNCIsIm11eGluZyI6IjE5MjAiLCJsaXZlU291cmNlSUQiOiI5ZGNhYmFhMWZlNzJiYjg3ZGM0ODY2YWRjYTQwNWYxZSJ9&s=KcK6w6XDgcKDRCk2YCwGw5jDvcOHCRPCm8KBVHJ-dsODMsO4wqfDk04MFsKoXQ"
#EXT-X-INDEPENDENT-SEGMENTS
#EXTINF:5.000,
../../81a0b5a7937546d4905212d0400e3860/video/1080/seg_14051.mp4?p=eyJ0eXBlIjoic2VnbWVudCIsInZpZGVvSUQiOiI4MWEwYjVhNzkzNzU0NmQ0OTA1MjEyZDA0MDBlMzg2MCIsIm93bmVySUQiOjQ2MDA2NjE4LCJjcmVhdG9ySUQiOiIiLCJzZWdtZW50RHVyYXRpb25TZWNzIjo0Ljk5OSwidXNlVk9ET1RGRSI6ZmFsc2UsInRyYWNrIjoiMSIsInJlbmRpdGlvbiI6IjQiLCJtdXhpbmciOiIxOTIwIiwibGl2ZVNvdXJjZUlEIjoiOWRjYWJhYTFmZTcyYmI4N2RjNDg2NmFkY2E0MDVmMWUifQ&s=w7IqQlQPw4l6H8KLDsOkc8KvRkMTL1kew6I-wrDCqsOwYEQIJ8KjWsK6Ww
#EXTINF:3.167,
../../81a0b5a7937546d4905212d0400e3860/video/1080/seg_14052.mp4?p=eyJ0eXBlIjoic2VnbWVudCIsInZpZGVvSUQiOiI4MWEwYjVhNzkzNzU0NmQ0OTA1MjEyZDA0MDBlMzg2MCIsIm93bmVySUQiOjQ2MDA2NjE4LCJjcmVhdG9ySUQiOiIiLCJzZWdtZW50RHVyYXRpb25TZWNzIjo0Ljk5OSwidXNlVk9ET1RGRSI6ZmFsc2UsInRyYWNrIjoiMSIsInJlbmRpdGlvbiI6IjQiLCJtdXhpbmciOiIxOTIwIiwibGl2ZVNvdXJjZUlEIjoiOWRjYWJhYTFmZTcyYmI4N2RjNDg2NmFkY2E0MDVmMWUifQ&s=w7IqQlQPw4l6H8KLDsOkc8KvRkMTL1kew6I-wrDCqsOwYEQIJ8KjWsK6Ww
#EXTINF:5.000,
../../81a0b5a7937546d4905212d0400e3860/video/1080/seg_14053.mp4?p=eyJ0eXBlIjoic2VnbWVudCIsInZpZGVvSUQiOiI4MWEwYjVhNzkzNzU0NmQ0OTA1MjEyZDA0MDBlMzg2MCIsIm93bmVySUQiOjQ2MDA2NjE4LCJjcmVhdG9ySUQiOiIiLCJzZWdtZW50RHVyYXRpb25TZWNzIjo0Ljk5OSwidXNlVk9ET1RGRSI6ZmFsc2UsInRyYWNrIjoiMSIsInJlbmRpdGlvbiI6IjQiLCJtdXhpbmciOiIxOTIwIiwibGl2ZVNvdXJjZUlEIjoiOWRjYWJhYTFmZTcyYmI4N2RjNDg2NmFkY2E0MDVmMWUifQ&s=w7IqQlQPw4l6H8KLDsOkc8KvRkMTL1kew6I-wrDCqsOwYEQIJ8KjWsK6Ww
#EXTINF:3.667,
../../81a0b5a7937546d4905212d0400e3860/video/1080/seg_14054.mp4?p=eyJ0eXBlIjoic2VnbWVudCIsInZpZGVvSUQiOiI4MWEwYjVhNzkzNzU0NmQ0OTA1MjEyZDA0MDBlMzg2MCIsIm93bmVySUQiOjQ2MDA2NjE4LCJjcmVhdG9ySUQiOiIiLCJzZWdtZW50RHVyYXRpb25TZWNzIjo0Ljk5OSwidXNlVk9ET1RGRSI6ZmFsc2UsInRyYWNrIjoiMSIsInJlbmRpdGlvbiI6IjQiLCJtdXhpbmciOiIxOTIwIiwibGl2ZVNvdXJjZUlEIjoiOWRjYWJhYTFmZTcyYmI4N2RjNDg2NmFkY2E0MDVmMWUifQ&s=w7IqQlQPw4l6H8KLDsOkc8KvRkMTL1kew6I-wrDCqsOwYEQIJ8KjWsK6Ww
#EXTINF:5.000,
../../81a0b5a7937546d4905212d0400e3860/video/1080/seg_14055.mp4?p=eyJ0eXBlIjoic2VnbWVudCIsInZpZGVvSUQiOiI4MWEwYjVhNzkzNzU0NmQ0OTA1MjEyZDA0MDBlMzg2MCIsIm93bmVySUQiOjQ2MDA2NjE4LCJjcmVhdG9ySUQiOiIiLCJzZWdtZW50RHVyYXRpb25TZWNzIjo0Ljk5OSwidXNlVk9ET1RGRSI6ZmFsc2UsInRyYWNrIjoiMSIsInJlbmRpdGlvbiI6IjQiLCJtdXhpbmciOiIxOTIwIiwibGl2ZVNvdXJjZUlEIjoiOWRjYWJhYTFmZTcyYmI4N2RjNDg2NmFkY2E0MDVmMWUifQ&s=w7IqQlQPw4l6H8KLDsOkc8KvRkMTL1kew6I-wrDCqsOwYEQIJ8KjWsK6Ww
#EXTINF:5.833,
../../81a0b5a7937546d4905212d0400e3860/video/1080/seg_14056.mp4?p=eyJ0eXBlIjoic2VnbWVudCIsInZpZGVvSUQiOiI4MWEwYjVhNzkzNzU0NmQ0OTA1MjEyZDA0MDBlMzg2MCIsIm93bmVySUQiOjQ2MDA2NjE4LCJjcmVhdG9ySUQiOiIiLCJzZWdtZW50RHVyYXRpb25TZWNzIjo0Ljk5OSwidXNlVk9ET1RGRSI6ZmFsc2UsInRyYWNrIjoiMSIsInJlbmRpdGlvbiI6IjQiLCJtdXhpbmciOiIxOTIwIiwibGl2ZVNvdXJjZUlEIjoiOWRjYWJhYTFmZTcyYmI4N2RjNDg2NmFkY2E0MDVmMWUifQ&s=w7IqQlQPw4l6H8KLDsOkc8KvRkMTL1kew6I-wrDCqsOwYEQIJ8KjWsK6Ww
#EXTINF:5.800,
../../81a0b5a7937546d4905212d0400e3860/video/1080/seg_14057.mp4?p=eyJ0eXBlIjoic2VnbWVudCIsInZpZGVvSUQiOiI4MWEwYjVhNzkzNzU0NmQ0OTA1MjEyZDA0MDBlMzg2MCIsIm93bmVySUQiOjQ2MDA2NjE4LCJjcmVhdG9ySUQiOiIiLCJzZWdtZW50RHVyYXRpb25TZWNzIjo0Ljk5OSwidXNlVk9ET1RGRSI6ZmFsc2UsInRyYWNrIjoiMSIsInJlbmRpdGlvbiI6IjQiLCJtdXhpbmciOiIxOTIwIiwibGl2ZVNvdXJjZUlEIjoiOWRjYWJhYTFmZTcyYmI4N2RjNDg2NmFkY2E0MDVmMWUifQ&s=w7IqQlQPw4l6H8KLDsOkc8KvRkMTL1kew6I-wrDCqsOwYEQIJ8KjWsK6Ww
#EXTINF:5.000,
../../81a0b5a7937546d4905212d0400e3860/video/1080/seg_14058.mp4?p=eyJ0eXBlIjoic2VnbWVudCIsInZpZGVvSUQiOiI4MWEwYjVhNzkzNzU0NmQ0OTA1MjEyZDA0MDBlMzg2MCIsIm93bmVySUQiOjQ2MDA2NjE4LCJjcmVhdG9ySUQiOiIiLCJzZWdtZW50RHVyYXRpb25TZWNzIjo0Ljk5OSwidXNlVk9ET1RGRSI6ZmFsc2UsInRyYWNrIjoiMSIsInJlbmRpdGlvbiI6IjQiLCJtdXhpbmciOiIxOTIwIiwibGl2ZVNvdXJjZUlEIjoiOWRjYWJhYTFmZTcyYmI4N2RjNDg2NmFkY2E0MDVmMWUifQ&s=w7IqQlQPw4l6H8KLDsOkc8KvRkMTL1kew6I-wrDCqsOwYEQIJ8KjWsK6Ww

Answer 1 · 2022-12-18T16:42:59.000Z

hey, @chintan9 could you review his work about the usage of useHls module?