tubearchivist / tubearchivist

Your self hosted YouTube media server
https://www.tubearchivist.com
GNU General Public License v3.0
5.15k stars 228 forks source link

Playing downloads on Safari #61

Closed deanpribetic closed 3 years ago

deanpribetic commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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

borgmanJeremy commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

cpt-kuesel commented 3 years ago

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 commented 3 years ago

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.