This seems to be a recurring issue with some mp4 files on Safari.
I tested your video on a local host node.js and it played great in Safari, which means the video should be fine.
If you look at the web inspector in Safari, you will see that the web request does not include some headers. This causes problems with the servers and they do not react as Safari expects, or they do not react at all.
You can see similar problems being discussed (the second is not your case, I think, but illustrates that the information included in the request sent to the server can cause the server to “decide” not to respond as you want):
Update
Using wirehark to capture a request from Chrome, you can see that the server responds with the video that will be played, while the request from Safari (on the same computer) does not give a response from the server.
Requests are generally similar, and both include a referrer header. The Safari browser first requests the first 2 bytes from the server - it does this using the "range" header, which is used to specify the range of bytes that the file returns:
- Range: bytes = 0-1 \ r \ n
Chrome, on the other hand, requests all the videos in its range request:
- Range: bytes = 0- \ r \ n
However, using an HTTP tool (e.g. Postman) in Chrome and changing the range to 0-1 does not mean that the server is responding in the case of Chrome. In fact, using the installation tool as much as possible, all the same headers as safari seem to still return the video in order.