| Summary: | Unable to play webm video from Cloudfront CDN unless it has .webm extension | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Darin <darin.dimitrov> |
| Component: | Media | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW --- | ||
| Severity: | Normal | CC: | ahmad.saleem792, bfulgham, darin.dimitrov, jer.noble, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 14 | ||
| Hardware: | Mac (Intel) | ||
| OS: | macOS 11 | ||
It seems that the only difference between the 2 urls is that the one that works contains ".webm" extension and it is what makes the difference. Even though both set the Content-Type response header to "video/webm", if the url doesn't contain a .webm extension, Safari refuses to load it. I am able to reproduce this bug and the JSFiddle does not load any video content in Safari Technology Preview 180. While works fine in Chrome Canary 120. |
I have uploaded the same webm video on two different CDNs and I am trying to play it in Safari using the <video> tag: <video controls crossorigin="anonymous" preload="auto" width="640" height="264"> <source src="https://snapshots.getfiddler.cc/jam-files/19516557d1484505be0d6df587883d2d?Expires=1702305315&Signature=AHclNVTFMZGVaVU0~q2-IeueiVjltCU79MZ0vpj9gu5t7VAetercr~b5RAm5S80UTRA0SSe7dluctbZieO3seMI9AUtZ3EdZMWlpZDSZXP3dpJVHBxbgkfcmSw393Medn1AtIiPObDnBHLaalHgDIl-o8H1m7XyIKINuR0tQXUIo7ZjIejz4fMZkSDQSKAvwHuD2mzcpZytgMMMho~7RcE5tqzbyM6OZHO-6ArqwoOpadLwY9OUa6L7JTEUauJ2MA44r15FU0muMXMr-OzAI3wxb9WHTGo8yNabvDJHDu2Mto2JQNkbkvHmN~SqwHSB1eNarLKjc2y2BP9cfqPPNog__&Key-Pair-Id=APKAIF6VYYHXO2CANQUA" type="video/webm;codecs="vp9""></source> </video> Live demo: https://jsfiddle.net/w1os50ud/ Inspecting the network tab, the media HTTP request fails without any error logged to the console. The same video file works if I use the following url: <video controls crossorigin="anonymous" preload="auto" width="640" height="264"> <source src="https://downloads.getfiddler.cc/foo/video_plain_vp9.webm" type="video/webm;codecs="vp9""></source> </video> Live demo: https://jsfiddle.net/5bmch2pa/ By looking at the network tab I cannot see any apparent difference between the two requests or responses. Do you have any idea why the first CDN doesn't work in Safari while it works on all other browsers?