ffmpeg-mp4可以在野生动物园中播放，除非它不是第一个来源？ Chrome无法播放相同的mp4吗？

Question

Yet another issue trying to get html5 video working.

I have created 3 versions of the same video in 3 different formats using ffmpeg: mp4, ogg, and webm.

The .ogg plays fine in chrome when listed as the first html5 video source, and the .mp4 plays fine in safari when listed as the first html5 video source, however, if I list the .mp4 source above the .ogg source, chrome will no longer load/play the .ogg video as it is defaulting to the .mp4 video which will not play , and in the same fashion, if I list the .ogg source file above the .mp4 source file, safari will not load the .mp4 video.

I am at a loss. Here is my embed code:

<video width="100%" height="100%">
    <source src="./videos/Wildlife.ogg">
    <source src="./videos/Wildlife.webm">
    <source src="./videos/Wildlife.mp4">
</video>

Any ideas as to why the fallbacks between sources are is not working properly?

Why isn't safari obeying the fallback order and ignoring the .ogg/.webm files?

Answer 1

After quite a bit of troubleshooting, and adding/removing tags, I finally got the fallbacks to work properly by listing their types.

<video width="100%" height="100%">
    <source src="./videos/Wildlife.ogg" type="video/ogg">
    <source src="./videos/Wildlife.webm" type="video/webm">
    <source src="./videos/Wildlife.mp4" type="video/mp4">
</video>

In other words, in my case, the browsers would not fallback to the next available (playable) video format unless I added the 'type=' attributes on each video type.