Video files not playing on Safari and iOS devices #523

S66D · 2016-10-26T08:42:34Z

Hello Jooby Teem,
I am relay glad of what Jooby have become, it is on fire, anyway I have came across a daring challenge and I have been drained out thoughts, I don't know exactly where could the issues be, so I will try to mimic the problem as best as possible:
working directory structure:

Main.java

package com.mycompany;
import org.jooby.Jooby;
public class Main extends Jooby {
    {
        assets("/index.html");
        assets("/video.mp4");
        assets("/audio.mp3");
    }
    public static void main(String[] args) {
        run(Main::new, args);
    }
}

index.html

<!DOCTYPE html>
<html>
    <body>
        <video controls>
            <source src="video.mp4" type="video/mp4">
        </video>
        <audio controls>
            <source src="audio.mp3" type="audio/mp3">
        </audio>
    </body>
</html>

and of course to include the video and audio files NOW what is bugging me is that why all major browsers plays the video and audio files perfectly except for Safari on mac and iOS devises to play only audio files.
I don't think this is a file format issue I have uploaded the files on other servers and have not inconter any issue of this kind.
I searched more deep on this mater and found several issues withe Safari and one of these issues was Safari strict byte-range on media files
http://stackoverflow.com/questions/36579176/safari-9-mp4-video-issues
http://stackoverflow.com/questions/32996396/safari-9-0-can-not-play-mp4-video-on-the-storage-server

I made a small test responding to a byte-range request and it seems we manged to make a connection with Safari and it was Jooby lack of byte-range responses.

I hope this is clear for this issue.
Thanks

The text was updated successfully, but these errors were encountered:

jknack · 2016-10-26T11:37:47Z

byte-range was in my TODO list but then I forgot. Still don't think that is the problem as far as I know it is an optional requirement.

Is there a way to get a copy of those files? Did you check what media type Jooby gives you for each file?

Thanks

S66D · 2016-10-26T19:55:13Z

Thank you for your attention @jknack,
Yes, Jooby lacks the support of some media type but it could be implemented and easily solved, so here is the response and request headers for both Safari and Chrome browsers within a <video> tag:

Safari

[REQUEST]
GET /video.mp4 HTTP/1.1
Host: 127.0.0.1:8080
Accept-Language: en-us
X-Playback-Session-Id: C05264D0-B11E-47D4-8CEC-7A2EF3A9ECFD
Range: bytes=0-1
Accept: */*
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/601.7.8 (KHTML, like Gecko) Version/9.1.3 Safari/601.7.8
Referer: http://127.0.0.1:8080/index.html
Accept-Encoding: identity
Connection: close

[RESPONSE]
HTTP/1.1 200 OK
ETag: W/"///+qBmoafU=/////+NwQjc="
Last-Modified: Wed, 26 Oct 2016 02:09:14 GMT
Content-Type: application/octet-stream
Content-Length: 395277

Chrome

[REQUEST]
GET /video.mp4 HTTP/1.1
Host: 127.0.0.1:8080
Accept-Encoding: identity;q=1, *;q=0
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36
Accept: */*
Referer: http://127.0.0.1:8080/index.html
Accept-Language: en-US,en;q=0.8,ar;q=0.6
Range: bytes=0-
Connection: close


[RESPONSE]
HTTP/1.1 200 OK
ETag: W/"///+qBmoafU=/////+NwQjc="
Last-Modified: Wed, 26 Oct 2016 02:09:14 GMT
Content-Type: application/octet-stream
Content-Length: 395277

SO setting the correct MIME type is of course very needed here but I have already tested it to see if it was the reason that made Safari sad but NO LUCK that was not the issue,
The Complete List of MIME Types

Video and audio files that been used is from W3schools some stranded media files:
http://www.w3schools.com/html/mov_bbb.mp4
http://www.w3schools.com/html/horse.mp3

jknack · 2016-10-26T20:00:12Z

Don't see the correct mime type there, instead: application/octet-stream

Go to your .conf file add this line and try again:

mime.mp4=video/mp4

S66D · 2016-10-26T23:42:26Z

I was answering your question of

Did you check what media type Jooby gives you for each file?<

I also said:

SO setting the correct MIME type is of course very needed here but I have already tested it to see if it was the reason that made Safari sad but NO LUCK that was not the issue,

I did the test again:

[RESPONSE]
HTTP/1.1 200 OK
ETag: W/"///+p+n8XBU=/////+rnDIY="
Last-Modified: Wed, 26 Oct 2016 22:23:31 GMT
Content-Type: video/mp4
Content-Length: 788493

As I said this is not the issue here and but I notice odd beaver with Safari when requesting an audio file and it could be the reason that audio files is playable without the support of byte-range.
As you will see Safari tends to send two http requests when coming across audio file and they are slightly different:

[FIRST REQUEST]
 GET /audio.mp3 HTTP/1.1
Host: 127.0.0.1:8080
Accept-Language: en-us
X-Playback-Session-Id: 2597AAB6-EA58-4820-BAAE-EA8DE431B297
**Range: bytes=0-1**
Accept: */*
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/601.7.8 (KHTML, like Gecko) Version/9.1.3 Safari/601.7.8
Referer: http://127.0.0.1:8080/index.html
Accept-Encoding: identity
Connection: close

[SECOND REQUEST]
GET /audio.mp3 HTTP/1.1
Host: 127.0.0.1:8080
Accept-Language: en-us
X-Playback-Session-Id: 2597AAB6-EA58-4820-BAAE-EA8DE431B297
**icy-metadata: 1**
Accept: */*
User-Agent: AppleCoreMedia/1.0.0.15G1004 (Macintosh; U; Intel Mac OS X 10_11_6; en_us)
Referer: http://127.0.0.1:8080/index.html
Accept-Encoding: identity
Connection: close

[RESPONSE]
HTTP/1.1 200 OK
ETag: W/"///+p6W4Pvw=/////6avFpY="
Last-Modified: Wed, 26 Oct 2016 22:23:31 GMT
Content-Type: audio/mpeg
Content-Length: 28915

What I understood is that Safari has a fallback with audio files not supporting byte-range.
Hope this clear now.
Cheers

S66D · 2016-10-27T05:46:47Z

I have done more research about this mater and now I am confident that this issue is indeed Jooby lack of byte-range but not just Jooby in fact almost all java micro web framework lack of this feature, so I think this could be a deal breaker that only Jooby possess on launching.
stackoverflow: <video> plays in other browsers, but not Safari
HTML5 VIDEO bytes on iOS
stackoverflow: Does iPhone/iPad Safari require 'Accept-Ranges' header for video?

S66D · 2016-10-28T09:52:10Z

@jknack, did you mange to confirm this issue

jknack · 2016-10-28T11:46:05Z

Yes, I was able to reproduce the issue going to implement byte-range and see if that helps (99% sure it will)

jknack · 2016-11-05T16:10:07Z

Confirmed and byte range fix this problem. See #542

* single byte range support for inputstream and filechannel * Video files not playing on Safari and iOS devices fix #523

S66D changed the title ~~Video files not playing on Safari and iOS divises~~ Video files not playing on Safari and iOS devices Oct 27, 2016

jknack added the bug label Nov 5, 2016

jknack added this to the 1.0.0 milestone Nov 5, 2016

jknack closed this as completed in 142a933 Nov 5, 2016

jknack added a commit that referenced this issue Nov 12, 2016

byte range support fix #542

d6c1bcf

* single byte range support for inputstream and filechannel * Video files not playing on Safari and iOS devices fix #523

jknack added a commit that referenced this issue Nov 12, 2016

byte range support fix #542

c11b3d5

* single byte range support for inputstream and filechannel * Video files not playing on Safari and iOS devices fix #523

gramakri mentioned this issue Dec 28, 2023

mp4 does not play in safari sergix44/XBackBone#557

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Video files not playing on Safari and iOS devices #523

Video files not playing on Safari and iOS devices #523

S66D commented Oct 26, 2016 •

edited

Loading

jknack commented Oct 26, 2016

S66D commented Oct 26, 2016 •

edited

Loading

jknack commented Oct 26, 2016

S66D commented Oct 26, 2016

S66D commented Oct 27, 2016

S66D commented Oct 28, 2016

jknack commented Oct 28, 2016

jknack commented Nov 5, 2016

Video files not playing on Safari and iOS devices #523

Video files not playing on Safari and iOS devices #523

Comments

S66D commented Oct 26, 2016 • edited Loading

jknack commented Oct 26, 2016

S66D commented Oct 26, 2016 • edited Loading

Safari

Chrome

jknack commented Oct 26, 2016

S66D commented Oct 26, 2016

S66D commented Oct 27, 2016

S66D commented Oct 28, 2016

jknack commented Oct 28, 2016

jknack commented Nov 5, 2016

S66D commented Oct 26, 2016 •

edited

Loading

S66D commented Oct 26, 2016 •

edited

Loading