search

chintan9 / plyr-react

A simple, accessible and customisable react media player for Video, Audio, YouTube and Vimeo
https://github.com/chintan9/plyr-react
MIT License
474 stars 52 forks source link

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

Open iDVB opened 1 year ago

iDVB commented 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.

On first load:

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

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
realamirhe commented 1 year ago

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