search

muxinc / next-video

The easiest way to add video in your Nextjs app.
https://next-video.dev
MIT License
858 stars 33 forks source link

Can't play videos that don't have an extension on iOS #262

Closed lpbonomi closed 3 months ago

lpbonomi commented 5 months ago

Similar to these:

https://stackoverflow.com/questions/32954091/how-to-play-a-video-from-url-with-no-file-extension-in-ios https://stackoverflow.com/questions/30199261/why-wont-safari-play-file-without-extension-in-video

I can't play videos that don't have an extension in the URL on iOS

A previous solution I found was using the tag with the video's URL and specifying the type of the video, this is not supported by NextVideo.

I made a repo: https://github.com/lpbonomi/next-video-error-demo And deployed the code showing this behaviour: https://next-video-error-demo.vercel.app/ (Please use an iOS device to see the problem)

Is there another way to do this?

luwes commented 5 months ago

are you looking for something like this https://github.com/muxinc/next-video/pull/263/files ?

lpbonomi commented 5 months ago

Not really, I don't think this fixes my problem and I would also like to keep the other functionalities from the <Video /> component.

The thing is that some of the videos uploaded with <Video /> component don't have an extension in the resulting URL.

For example,

This video works: https://next-videos-ultradrop.s3.us-east-1.amazonaws.com/videos/113a27a38b7a59b0d0522e30716a89385ccd67da67cdb8582d19fed2b26a43cf.mp4

This one doesn't: https://next-videos-ultradrop.s3.us-east-1.amazonaws.com/videos/0hOSpzin-U7fDiifE0H-hnuZ4u_V_tofCJbxpqpNJCA

(Check out the extension at the end of the URL)

I think that the resulting video doesn't have an extension because the original one didn't have one either, but I can't use the same fix as in the repro repo because I can't use the <source /> tag in NextVideo.

I think that this could get fixed by adding an extension to the resulting URL, maybe by finding out the type of the video, or maybe allow the use of <source /> in the <Video /> component.

@luwes What do you think? I can give out a hand with this if you need

luwes commented 5 months ago

gotcha, yes this might be tricky because the default player is the Mux player web component and it doesn't support source elements at the moment. I'll ask the team here if we might be able to support it.

RosarioAleCali commented 4 months ago

Are there any updates on this? I am experiencing some issues where videos don't play on iOS (both Safari and Chrome).

I am guessing it might be related to this, although I am not sure.

Here's a separate issue I've opened: https://github.com/muxinc/next-video/issues/274

@luwes @lpbonomi

luwes commented 4 months ago

no update yet but we are planning to add this functionality to the player. I will notify here

RosarioAleCali commented 4 months ago

@luwes Thanks for the update, much appreciated. Also, how likely you think this is connected to https://github.com/muxinc/next-video/issues/274?

Let me know if you need more info or if I can help!

jeffreymc2 commented 4 months ago

I'm experiencing similar issue where some mp4s despite having the file extension are throwing a "Source Not Supported" error.

luwes commented 3 months ago

@jeffreymc2 that's something else though. does the video still play?

luwes commented 3 months ago

@lpbonomi added a PR ^^ — will this do? example at https://next-video-demo-git-fork-luwes-source-tag-mux.vercel.app/source-tag

alternative solution:

btw I also just remembered it's possible to verify if uploaded assets have a file extension and append one in the remote bucket key with the provider hook generateAssetKey. https://github.com/muxinc/next-video/blob/main/src/config.ts#L48-L55