Playing downloads on Safari

[deanpribetic]

Hey there – I am finding that downloaded videos won't play in Safari browsers (Mac or iOS). This seems to be an issue with how the webserver provides 'range' data to clients. This is beyond my expertise to fix. Any thoughts?

Oh…works great on Chrome though :)

[bbilly1]

Sorry, I don't have access to any Mac or Safari, so that is untested.

Any change somebody with a mac can help here?

But of course the lazy and potentially world war III starting answer here would be to use a more reasonable browser than Safari. :-)

[deanpribetic]

Ha ha! Yeah…I am not super particular about which browser I use. Was more hoping I could get something up so my children could access it via Safari on an iPad.

[bbilly1]

No need to tell the kids that the shortcut you have created on the home screen of the iPad is actually opening Tube Archivist with mobile Firefox.

But in all seriousness, somebody with a mac wanting to look into it, please let me know.

[pairofcrocs]

Hey there – I am finding that downloaded videos won't play in Safari browsers (Mac or iOS). This seems to be an issue with how the webserver provides 'range' data to clients. This is beyond my expertise to fix. Any thoughts?

Oh…works great on Chrome though :)

I can play videos on safari via a Mac Mini but not on my IPhone 12 Pro Max.

[borgmanJeremy]

Unfortunately I'm pretty sure Firefox on iOS uses safari on the back end so the issue is present there too.

I've replicated this in a VM to dig into it better. I can replicate it in safari in a Catalina VM. I do NOT think it is related to not supporting "range" because I followed this: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//apple_ref/doc/uid/TP40006514-SW6 and am able to curl just 100 bytes. I will continue to test in this VM and report any findings.

[twinkie0101]

@borgmanJeremy You are correct and just to keep my sanity at check, I tried firefox, duckduckgo, chrome, and safari via my iPhone 12 and none would play the video. I am happy to help trouble shoot but as for looking into code, you'd be better off asking someone that has deeper knowledge in this space than me.

[bbilly1]

OK, a little bit of research regarding Webkit showed, that for the \<video> tag to work on mobile, it needs the attribute playsinline set. If that is the case, this will require that to be added at two different places:

1. The video.html template that generates the video tag from html,
2. Additionally script.js where the createPlayer function is responsible to, well, create the player. That gets called on click on any thumbnail. So this function will need the line videoPlayer.setAttribute('playsinline', true); added there.

I didn't just want to push the changes without knowing if that is doing anything. Is somebody able to verify that this solves the problem? @borgmanJeremy @scottyb2210

[borgmanJeremy]

Yes I can for sure test it from source if you point me to a branch.

[borgmanJeremy]

@bbilly1 Actually I don't think that's the (only) root cause. If i download the .mp4 directly and try to serve that in a minimal flask app I still can't play it. It also doesn't play with quicktime, so I wonder if the ffmpeg settings need to change.

[bbilly1]

OK, If you prefer, I pushed the changes to the safari-fix branch.

Edit: Hmm, do you think it's a codec issue? I don't think I have passed any options to ffmpeg, that's just merge-output-format mp4 so far.

[borgmanJeremy]

Yes I just demonstrated its a codec issue on my server. I tried the safari-fix branch but for some reason it wasn't working behind my proxy.

Then I tried manually converting one of my video files (easy to do since my videos are volume mounted in), and I can play on safari on my catalina VM as well as on ios on my iphone.

Here is the ffmpeg command I used: ffmpeg -i -c:a mp3 -c:v libx264

I think BOTH the original audio and video codecs are incompatible with safari based on some testing I did.

Here are the details of the original codecs found with:

mediainfo <filename>

General
Complete name                            : video2.mp4
Format                                   : MPEG-4
Format profile                           : Base Media
Codec ID                                 : isom (isom/iso2/mp41)
File size                                : 77.6 MiB
Duration                                 : 16 min 29 s
Overall bit rate mode                    : Variable
Overall bit rate                         : 657 kb/s
Writing application                      : Lavf58.45.100

Video
ID                                       : 1
Format                                   : vp09
Codec ID                                 : vp09
Duration                                 : 16 min 29 s
Bit rate                                 : 544 kb/s
Width                                    : 1 920 pixels
Height                                   : 1 080 pixels
Display aspect ratio                     : 16:9
Frame rate mode                          : Constant
Frame rate                               : 25.000 FPS
Bits/(Pixel*Frame)                       : 0.011
Stream size                              : 64.2 MiB (83%)
Language                                 : English

Audio
ID                                       : 2
Format                                   : Opus
Codec ID                                 : Opus
Duration                                 : 16 min 29 s
Duration_FirstFrame                      : 1 ms
Bit rate mode                            : Variable
Bit rate                                 : 109 kb/s
Compression mode                         : Lossy
Stream size                              : 12.9 MiB (17%)
Language                                 : English
Default                                  : Yes
Alternate group                          : 1

FYI if you ever want to test on a Mac VM quickemu makes this super easy (I use it for flameshot development). I'm also happy to keep testing.

[bbilly1]

Then I hope that can be done by selecting the correct format do download to begin with instead of re-invoking ffmpeg again after downloading. For example: bestvideo[VCODEC=avc1]+bestaudio[ACODEC=mp4a]/mp4 to select AVC and AAC codecs. Or any similar variation from the format selection part of yt-dlp?

[borgmanJeremy]

Yeah i think that would fix it. Is this where I would make the change to test it? https://github.com/bbilly1/tubearchivist/blob/528938942a696f8d544df85ed1d0ecbc7b5855a6/tubearchivist/home/src/download.py#L500

[borgmanJeremy]

Oh, nevermind, I see there is already a settings page to configure this. Yes changing the codec on the configuration page solves the issue. It's up to you if you think the default should change to support Safari or maybe just add it to the README?

[deanpribetic]

I think you an update to the README should be enough.

[cpt-kuesel]

can confirm "bestvideo[height<=1080][VCODEC=avc1]+bestaudio[ACODEC=mp4a]/mp4" is now downloading 1080p videos that my ipad can play. thank you for looking into this guys!

[bbilly1]

Just a heads up: In some examples this has resulted in bigger file sizes for me than the default codecs used by yt-dlp. So yes I agree with @deanpribetic I don't think that's reason enough to stray from the default of yt-dlp but if you need the compatibility, it's in the readme, thanks @borgmanJeremy, I've also added another example in the settings page.

Great team work! Thanks for everybody looking into it, closing the issue.