使用videojs时，mp4和webm会导致Web浏览器发生冲突

Question

我使用下面的视频播放器 videojs ：

<video id="font_video" class="video-js vjs-default-skin" controls preload="none" width="700" height="360" poster="" data-setup="{}">
  <source src="xxx.mp4" type='video/mp4' />
  <source src="xxx.webm" type='video/webm' />
</video>

<script>
   _V_.options.flash.swf = "assets/video-js.swf";
</script>

以上代码在 Safari 中成功运行，但未在 Chrome 和 Firefox 中运行。

如果我交换 mp4 和 webm 的位置，就像这样：

<video id="font_video" class="video-js vjs-default-skin" controls preload="none" width="700" height="360" poster="" data-setup="{}">
  <source src="xxx.webm" type='video/webm' />
  <source src="xxx.mp4" type='video/mp4' />
</video>

然后代码不再在 Safari 中运行，而是在 Chrome 和 Firefox 中运行。 有人有解释吗？