我知道这个问题很老了,但是我最近遇到了这个问题,我想为任何未来遇到同样问题的冒险家解答一下。
这是Firefox中已知的问题。有时它就是不想播放webm文件。我不知道为什么,也没打算去弄清楚。我通过改变源标签的顺序来解决了这个问题。
我以前是这样的:
<source src="myVideo.webm" type="video/webm">
<source src="myVideo.mp4" type="video/mp4">
<source src="myVideo.ogv" type="video/ogv">
这样,Firefox尝试打开网页中的WebM视频时发现了问题,无法播放。但由于其支持该格式,它仍然尝试使用该源进行播放。为了解决这个问题,我按照以下步骤操作:
<source src="myVideo.ogv" type="video/ogv">
<source src="myVideo.mp4" type="video/mp4">
<source src="myVideo.webm" type="video/webm">
我也来发表一下我的看法。今天我自己刚刚遇到了这个问题。随着Firefox现在已经更新到33版本,Firefox对于webm的处理方式发生了“某些”变化,但它肯定没有做正确的事情。(我在这里开了一个帖子...Trouble getting HTML5 vidio to play, in Firefox 33)
但归根结底,这又是Firefox的一个问题,可能需要数年时间才能解决。但我岔开话题了...这确实是Firefox的问题,由于视频源文件的首选顺序是MP4,其次是webm和ogg,现在唯一明智的做法是检测Firefox浏览器并相应地采取行动。我是通过在我的公共“sitescripts.js”文件中创建一个JavaScript函数来实现的,如下所示...
function browserComment(browser, comment)
{
if(navigator.userAgent.toLowerCase().indexOf(browser) < 0) return;
if (comment == true) document.write("<!--");
else document.write("-->");
}
它的目的是让我检测特定的浏览器,然后添加HTML注释的开头或结尾。因此,在我的HTML5视频编码中,我将执行类似下面的操作。请注意,我如何使用上述函数检测火狐浏览器,并通过传递true或false来在页面呈现时添加打开或关闭注释。
<video width="640" height ="480" controls poster="somePhoto.JPG">
<source src ="someVideo.mp4" type='video/mp4' > <!--cSafari / iOS 1st -->
<!-- firefox supports 'webm'... but doesn't work properly.
So I'll comment out the webm version -->
<script> browserComment('firefox', true ) </script>
<source src ="someVideo.webm" type='video/webm' > <!-- Firefox / Opera / Chrome -->
<script> browserComment('firefox', false ) </script>
<source src ="someVideo" type='video/ogg' > <!-- Firefox / Opera / Chrome -->
<!-- other code to invoke Flask player as a fallback -->
</video>
虽然有点丑陋,但至少它保留了视频源的正确顺序,以便其他与webm文件正常工作的浏览器(如Chrome)可以使用。当Mozilla终于在遥远的623.2版本左右修复这个问题时,我只需要修改我的browserComment()函数,开始考虑版本因素。