Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
iDVB opened this issue Dec 10, 2022 · 1 comment
Open

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

iDVB opened this issue Dec 10, 2022 · 1 comment
Labels
discussion question Further information is requested

Comments

@iDVB
Copy link

iDVB commented Dec 10, 2022

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
image

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
@realamirhe
Copy link
Collaborator

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

@realamirhe realamirhe added question Further information is requested discussion labels Feb 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
discussion question Further information is requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@iDVB @realamirhe