Need help on <video> element to show fallback content in <p> element

Hi, I’ve read about Video and audio content. I tried the code:

<video controls>
    <source src="rabbit320.mp4" type="video/mp4">
    <source src="rabbit320.webm" type="video/webm">
    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

However, when I delete both <source> elements,

<video controls>
    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

the content of the <p> does not show.

I’ve tried firefox and edge but the the content of the <p> does not show. Can anyone clarify me why such thing occur?

Hi @Puff_TheMagicDragon

Since modern browsers do understand the <video> tag, they simply ignore the fallback text. This even happens when there aren’t any sources. They just display an empty media player. It could for example be that the actual video source gets loaded later via JS.
You will only see the fallback text on very old browsers (like IE 8). Since does old browsers don’t know the <video> and <source> tag, they will ignore it and the only thing left is the fallback text.

Does that make it clearer for you?

Have a nice weekend,
Michael

2 Likes

Ohh ok. Thank you very much :slightly_smiling_face: @mikoMK

2 Likes