Video rendering problem in Safari

DanielWahl · December 21, 2020, 10:59am

Hi guys,

I working on a fullscreen slider with video integration (mp4-videos).
Everything is working fine, besides in Safari.

I know that Safari has some problems with the HTML5 video tag, but I tried every solution I could find (muted, playsinline, preload, js(play, pause, …) and nothing works.

After checking the URL of the video in the Dom, I realized that the processed Video doesn’t even work when opening in a new tab.

The url as reference: http://localhost:8081/_Resources/Persistent/8/6/5/9/8659114eb7c515b396830f9c946d8f6a0d164484/test.mov

Has anyone encountered the same problem with processed videos in Safari?

Here’s how I implemented the rendering:

I wrote a small index.html to test the same video files in safari and they work fine (so the headers are correct).

Thanks in advance.
Daniel

sorenmalling · December 21, 2020, 4:38pm

What doesn’t work?

joekolade · December 26, 2020, 11:59am

Does type="video/quicktime" help?
Did you try another movie container (mp4 or else) already?

DanielWahl · January 6, 2021, 10:26am

Here is a screenshot of the page in Safari, compared to Firefox and Opera (Chrome works the same as Firefox). The video won’t load.

I get the error AbortError: The operation was aborted. - promiseReactionJob in Safari (only in Safari and only this error).

I tested the same video files on a simple HTML-Page in Safari and they work. So the header information of the video files are correct.

leanferret · January 11, 2021, 9:43am

Hi Daniel,

what slider you’re using? In most cases the slider js is the problem on safari.

DanielWahl · January 12, 2021, 10:56am

It’s my own custom slider. I looked up a lot of problems with Safari and Videosliders (play,pause, …) but no solution fixed the problem.

tantegerda1 · January 12, 2021, 4:02pm

Sorry if my question is a little bit basic, but: If you access the video url alone (as you posted above), does the web server deliver the resource with correct content-type http header?

Can you post the full http response headers – i.e. the result of curl --location --head http://localhost:8081/_Resources/Persistent/8/6/5/9/8659114eb7c515b396830f9c946d8f6a0d164484/test.mov ?

I remember some issues I had with images delivered with wrong content-type headers. “The other browsers” happily ignored the wrong content-type header and instead inferred the actual content type somehow – but not safari. Safari was actually more correct by following my (bad) server advice. So, in my case, safari took the blame too, while it was actually the only browser that correctly adhered to the wrong http response header information.

–
EDIT: Spelling.