Video rendering problem in Safari

DanielWahl · December 20, 2020, 5:53pm

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:25am

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:01pm

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.

DanielWahl · April 8, 2021, 3:40pm

Sorry for the late answer, I had other projects in the meantime.

The header seems okay:
HTTP/1.1 200 OK
Host: localhost:8081
Date: Thu, 08 Apr 2021 15:37:20 GMT
Connection: close
Content-Type: video/mp4
Content-Length: 1854608

I still haven’t found a solution to this problem.
It’s not only on localhost, but also on production.

I can’t even open the video link in Safari (getting a crossed-out play button).

It seems that the slider isn’t the problem. A normal Video (as popup) isn’t playing as well.

Is there a possibility to remove the media processing? Maybe it gets processed wrong.

alogiupviec · April 22, 2021, 9:19am

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.

DanielWahl · May 10, 2021, 9:52am

I still have the same problem, even without a slider.
A simple Video-Nodetype (no autoplay) with

<video ...>
    <source src={props.videosrc} type="video/mp4" />
</video>

won’t load in Safari.