Bug 277621

Summary: iOS Safari video element doesn't handle partial blob correctly.
Product: WebKit Reporter: youcheng321
Component: MediaAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Major CC: ahmad.saleem792, jer.noble, karlcow, webkit-bug-importer
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 16   
Hardware: iPhone / iPad   
OS: iOS 16   
See Also: https://bugs.webkit.org/show_bug.cgi?id=211323
https://bugs.webkit.org/show_bug.cgi?id=101671
https://bugs.webkit.org/show_bug.cgi?id=257365
Attachments:
Description Flags
Screen Record none

youcheng321
Reported 2024-08-04 23:56:26 PDT
Created attachment 472060 [details] Screen Record I converted an m3u8 text into a blob and assigned it to a video. The blob returns a 206 Partial Content, but the video triggers an error event. It seems that it cannot handle a 206-status blob response. This happens in iOS15/16 but work fine in iOS17 and Mac Safari 17.5 Is there any way to force video handle blob m3u8 correctly, or make blob response 200 full content instead of 206 partial content? Here is my demo code: <body> <video controls id="player"></video> <script> const player = document.querySelector('#player'); player.addEventListener('error', () => { console.log('Video error:', player.error) }) fetch('https://test-streams.mux.dev/x36xhzz/url_6/193039199_mp4_h264_aac_hq_7.m3u8') .then(res => res.text()) .then(m3u8 => { const blob = new Blob([m3u8], { type: 'application/vnd.apple.mpegurl' }); const blobUrl = URL.createObjectURL(blob); player.src = blobUrl; }) </script> </body>
Attachments
Screen Record (8.08 MB, video/mp4)
2024-08-04 23:56 PDT, youcheng321 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2024-08-05 16:25:48 PDT
<rdar://problem/133251131>
Ahmad Saleem
Comment 2 2024-08-06 06:44:38 PDT
@Youcheng - I changed your demo into JSfiddle: https://jsfiddle.net/bdz9phfy/ All browsers are giving me: *** Chrome Canary 129 *** "Video error:", [object MediaError] { code: 4, MEDIA_ERR_ABORTED: 1, MEDIA_ERR_DECODE: 3, MEDIA_ERR_NETWORK: 2, MEDIA_ERR_SRC_NOT_SUPPORTED: 4, message: "DEMUXER_ERROR_COULD_NOT_OPEN: FFmpegDemuxer: open context failed" } *** Firefox Nightly 130 *** "Video error:", [object MediaError] { code: 4, MEDIA_ERR_ABORTED: 1, MEDIA_ERR_DECODE: 3, MEDIA_ERR_NETWORK: 2, MEDIA_ERR_SRC_NOT_SUPPORTED: 4, message: "Failed to init decoder" } *** Safari 18 Beta **** "Video error:", [object MediaError] { code: 4, MEDIA_ERR_ABORTED: 1, MEDIA_ERR_DECODE: 3, MEDIA_ERR_ENCRYPTED: 5, MEDIA_ERR_NETWORK: 2, MEDIA_ERR_SRC_NOT_SUPPORTED: 4, message: "" }
youcheng321
Comment 3 2024-08-06 19:28:24 PDT
Yes Chrome/Firefox's behavior is expected, because they don't support hls natively, so you can't compare Safari with them.
Karl Dubost
Comment 4 2024-08-06 21:30:22 PDT
To understand better. You are saying that * BROKEN on iOS15/16 * WORKING on iOS17 Mac Safari 17.5 So it has been fixed? I'm confused. what I see for blob:https://fiddle.jshell.net/4ee9d30f-0551-4eb0-a5c8-a3d083fe3c9e It sends two requests and it bails out at the 3rd request 1. request =================================================== GET https://fiddle.jshell.net/4ee9d30f-0551-4eb0-a5c8-a3d083fe3c9e Range: bytes=0-1 Accept: */* =================================================== response =================================================== 206 Partial Content Content-Type: application/vnd.apple.mpegurl Content-Length: 2 Content-Range: bytes 0-1/3606 #E =================================================== 2. request =================================================== GET https://fiddle.jshell.net/4ee9d30f-0551-4eb0-a5c8-a3d083fe3c9e Range: bytes=0-7 Accept: */* =================================================== response =================================================== 206 Partial Content Content-Type: application/vnd.apple.mpegurl Content-Length: 8 Content-Range: bytes 0-7/3606 #EXTM3U =================================================== 3. request =================================================== GET https://fiddle.jshell.net/4ee9d30f-0551-4eb0-a5c8-a3d083fe3c9e Range: bytes=0-1445 Accept: */* =================================================== response =================================================== 206 Partial Content Content-Type: application/vnd.apple.mpegurl Content-Length: 1446 Referrer-Policy: strict-origin-when-cross-origin Content-Range: bytes 0-1445/3606 ===================================================
Karl Dubost
Comment 5 2024-08-06 21:31:18 PDT
It seems to be a duplicate of Bug 101671 Maybe @Jer could confirm?
youcheng321
Comment 6 2024-08-06 22:53:37 PDT
(In reply to Karl Dubost from comment #4) > To understand better. You are saying that > > * BROKEN on iOS15/16 > * WORKING on iOS17 Mac Safari 17.5 > > So it has been fixed? I'm confused. > > what I see for > blob:https://fiddle.jshell.net/4ee9d30f-0551-4eb0-a5c8-a3d083fe3c9e > It sends two requests and it bails out at the 3rd request > > 1. > request > =================================================== > GET https://fiddle.jshell.net/4ee9d30f-0551-4eb0-a5c8-a3d083fe3c9e > Range: bytes=0-1 > Accept: */* > =================================================== > > response > =================================================== > 206 Partial Content > Content-Type: application/vnd.apple.mpegurl > Content-Length: 2 > Content-Range: bytes 0-1/3606 > > #E > =================================================== > > > > 2. > request > =================================================== > GET https://fiddle.jshell.net/4ee9d30f-0551-4eb0-a5c8-a3d083fe3c9e > Range: bytes=0-7 > Accept: */* > =================================================== > > response > =================================================== > 206 Partial Content > Content-Type: application/vnd.apple.mpegurl > Content-Length: 8 > Content-Range: bytes 0-7/3606 > > #EXTM3U > =================================================== > > > 3. > request > =================================================== > GET https://fiddle.jshell.net/4ee9d30f-0551-4eb0-a5c8-a3d083fe3c9e > Range: bytes=0-1445 > Accept: */* > =================================================== > > response > =================================================== > 206 Partial Content > Content-Type: application/vnd.apple.mpegurl > Content-Length: 1446 > Referrer-Policy: strict-origin-when-cross-origin > Content-Range: bytes 0-1445/3606 > =================================================== It seems fixed in iOS 17，but my application needs to be compatible with older iOS, so I would like to know is there any better way to approach or any workaround about this?
Note You need to log in before you can comment on or make changes to this bug.