Video Element - src="" Safari compatibility

Support
#1

Hi

I’d like to understand why into TAG video element are added src="" value, when the offer multiple file sources into following tags

<video class="x-mejs advanced-controls lazyloaded" poster="" preload="metadata" loop="" id="mejs_03754286881123514_html5" src="https://www.agenziagammariccione.it/wp-content/uploads/agenzia-gamma-natale-2021.webm" autoplay="">
<source src="https://www.agenziagammariccione.it/wp-content/uploads/agenzia-gamma-natale-2021.webm" type="video/webm">
<source src="https://www.agenziagammariccione.it/wp-content/uploads/agenzia-gamma-natale-2021.mp4" type="video/mp4">
</video>

This src="" value seems to introduce an incompatibility with Mac Safari

Could you try https://www.agenziagammariccione.it/test
with Mac Safari

Thank You
Daniele

#2

Hello Daniele,

Thanks for writing in!

Please be advised that the *.webm video file format is not fully supported by Safari.

It is best that you use *.mp4 which is a cross-browser format. The *.webm and *.ogv are video formats that are mostly supported by other browsers like Firefox, Chrome, Brave, MS Edge. These formats could serve as a fallback when the *.mp4 format fails.

Best Regards.

#3

Hallo ruenel

In fact Because there are so many devices and browsers that could be viewing your website, and would want to watch your video, it is recommended that you offer multiple file sources. Basically, a source is the same video file offered in a different file format. So if you have an MP4 file format, it is recommended that you put an OGG , MOV and WEBM version as well.

The purpose is that if a certain browser doesn’t play one video format (e.g. MP4), you’ll have a backup format which the browser may support.

But usually it is implemented NOT with src=“” inside VIDEO TAG, but with different SOURCE TAG outside VIDEO TAG.

#4

Hi Daniele,

When adding multiple source tag for the video, it should be inside the video tag not outside. You can check this reference.

Hope that helps.

#5

Exactly

the reference you linked is WITHOUT src="" inside first <video … > tag

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Instead into the code generated by the PRO video element, there is an ADDITIONAL src="" inside first <video … > tag

<video src="movie.mp4" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Here is the html code generated by your PRO video element:

<video class="x-mejs advanced-controls lazyloaded" poster="https://www.agenziagammariccione.it/wp-content/uploads/agenzia-gamma-natale-2021.jpg" preload="metadata" id="mejs_4235222486285801_html5" src="https://www.agenziagammariccione.it/wp-content/uploads/agenzia-gamma-natale-2021.mp4" autoplay="">
<source src="https://www.agenziagammariccione.it/wp-content/uploads/agenzia-gamma-natale-2021.mp4" type="video/mp4">
<source src="https://www.agenziagammariccione.it/wp-content/uploads/agenzia-gamma-natale-2021.webm" type="video/webm">
</video>

Could you check?

Thank You

Daniele

#6

Hey Daniele,

Though there’s no src in the example, src is one of the optional Attributes of the Video element according to the doc posted by my colleague.

I tested the Video element and it does not look like it’s having an issue on both MacOS and iOS using Safari. What specific issue are you experiencing when playing the video in Safari so we could report it to our development team?

Thanks.

#7

Dear Christian
Thank You for your support

I’m sorry if I couldn’t explain myself.

Into the example of:


there’s NO src="" inside <video … > tag
<video width="320" height="240" controls>

But into the PRO video element generated TAG there is the src=""
<video src="movie.mp4" width="320" height="240" controls>
inside <video … > tag

For the BUG with Safari the issue I have experienced (due to the src = “” inside the video tag as above described) is that:

  • if the first video format choice is video.mp4 and the second choice is video.webm… everything works fine
  • if my first choice is video.webm and the second choice is video.mp4… Safari has a problem

Thank You

#8

Hey Daniele,

I was not referring to the W3Schools but Mozilla doc also linked by Marc. The Mozilla doc is more comprehensive and according to it, src is one of the optional attributes.

image
image817×212 8.39 KB

Thank you for detailing the issue. Ruenel mentioned previously that WebM is only partially supported in Safari so MP4 should really be your first choice. There’s no evidence yet that it’s the src that is causing the issue. You can prove that by copying the code output of the Video element (Full Code not just the video HTML) then removing the src part and pasting it into a Raw Content element and comparing the result with the Video element. If the video in the Raw Content works, we will post this case in our issue tracker so it will be queued for investigation by our development team.

Thanks.

#9

Thank You for your precious support.

II will test the case as suggested and let you know.

Thanks

#10

Hey Daniele,

Great and let us know how it goes.

Cheers!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.