Video rendering problem in Safari

Using Neos & Flow Frontend & Integration
#1

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:

Bildschirmfoto 2020-12-20 um 18.47.21
Bildschirmfoto 2020-12-20 um 18.47.21900×586 33.3 KB

Bildschirmfoto 2020-12-20 um 18.47.27
Bildschirmfoto 2020-12-20 um 18.47.271076×242 19.7 KB

Bildschirmfoto 2020-12-20 um 18.48.45
Bildschirmfoto 2020-12-20 um 18.48.451176×474 52.7 KB

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

#2

What doesn’t work?

#3

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

1 Like
#4

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.

Bildschirmfoto 2020-12-18 um 23.53.28
Bildschirmfoto 2020-12-18 um 23.53.283000×878 483 KB

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.

#5

Hi Daniel,

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

#6

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.

#7

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.

#8

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.

#9

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.

#10

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.