Open iDVB opened 1 year ago
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.
hlsSource
On first load:
Assertion failed: Initial audio track should be selected when tracks are known
On choosing a quality:
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):
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
hey, @chintan9 could you review his work about the usage of useHls module?
useHls
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:
Assertion failed: Initial audio track should be selected when tracks are known
On choosing a quality:
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![image](https://user-images.githubusercontent.com/189506/206862861-c352a205-3426-462e-b5d8-63037312cf2a.png)
Desktop (please complete the following information):
Additional context Original Example Stream - Root Manifest: https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8
Original Example Stream - Single Quality: https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8
Additional context Original Example Stream - Root Manifest: https://customer-owvx6b16l43yw5ic.cloudflarestream.com/9dcabaa1fe72bb87dc4866adca405f1e/manifest/video.m3u8
Original Example Stream - Single Quality: https://customer-owvx6b16l43yw5ic.cloudflarestream.com/9dcabaa1fe72bb87dc4866adca405f1e/manifest/stream_t1_r4.m3u8