Some video file types only served in a way Firefox can read them

[belling]

I'm working on a webpage that needs to support video files in different formats. Mostly likely I will end up with a .webm and a .mp4 but I've been testing with other formats to try to figure out what's up.

Within Phoenix's preview the only file that is showing in the page is the .webm. The other video files are not visible.

When I view the served page in Firefox, all the files are visible.

When I view the served page in any Chromium-based browser, the only visible file is the .webm. I also can open it directly with the server path and it works.

The other video files 404 if I open them with the server path, but they do work when I open them directly from the file system so they are where they should be and the browsers have the right codecs to play them.

I'm stumped. Any ideas?

Environment: MacOS latest, M2 MacMini, Phoenix Code 4.0.3, various browsers on latest versions except Chrome which is not installed on this machine

[abose]

Is the video part of the current project? if not the live preview in Phoenix code will prevent access to files outside of project as a security measure. That may explain the 404.

[belling]

Yes, the videos are in a directory that is within the project directory and appear within the project in the sidebar.

As they are called with native HTML and don't rely on JS, if I open the page that contains them as a local file they work properly but if I call the page from the server they are not displayed. It's maddening.

[abose]

What is the video size? Can you attach a minimal sample html code and a video file for me to debug the issue?

[belling]

I think I found what's going on, although it turns out it's probably a Safari issue. Due to how I was testing the markup I was setting it up to fail on other Chromium-based browsers and that got me extra confused but I've figured that out now. Let me start at the beginning...

What I'm trying to do is serve a video with a transparent alpha channel so other HTML objects can be seen behind it. I determined that Firefox will do this with a .webm using the VP9 codec. Easy peasy. But that's only Firefox. For the other browsers I need a .mp4 using the h.265 (not h.264) codec.

For testing I simply stacked

<video src="img/originals/output.mp4" autoplay loop></video>
<video src="img/originals/chicken%20animation.webm" autoplay loop></video>

This is where I started having problems. Firefox plays them both but (as expected) only respects the transparency on the .webm. The Chromium browsers don't play the .mp4 and (as expected) don't respect the transparency on the .webm.

So... What I learned is I need to specify the codec in HTML or else they'll keep trying to use h.264 and it will fail. So this is the markup I actually need.

<video playsinline autoplay loop>
            <source src="img/originals/output.mp4" type="video/mp4;codecs=hvc1" />
            <source src="img/originals/chicken%20animation.webm" type="video/webm" />
 </video>

Chromium browsers play the first one while Firefox says "I don't know what that is" and plays the second one.

I'm not entirely sure why that's the right codecs string, but it works. Except that still doesn't work in Safari.

Finally I looked at the Sources window in Safari's Web Developer and it is throwing this error for the .mp4:

Failed to load resource: Plug-in handled load

So searching on that it seems Safari expects .mp4 files coming from a blob server to be optimized for streaming and when they aren't it doesn't like them: https://stackoverflow.com/questions/18103103/failed-to-load-resource-plugin-handled-load-on-ios

I didn't do this optimization when I converted the .webm to .mp4. I'll redo the conversion tomorrow and hopefully that will fix that issue. So, it's not really a Phoenix Code problem but it sure seemed like it at first. Having two layers of reasons it wasn't working didn't help.

[abose]

Thanks for the detailed notes!

Looks like its not an issue within the editor. The live preview in Phoenix code is a safari webview in macOS and hence will behave similarly to it. Im marking this issue as a browser issue, feel free to comment here if you need any more help with this or need to add more context with the fix when done. Thanks.

[belling]

Just as an addendum, even when I web optimize the video Safari won't show it when it's served through. But when it's served from Apache even the non-web optimized version plays correctly. Which means I don't need to worry about it for what I'm doing, but now you know in case this ever comes up again.