Html Safari 和 Firefox 中的 HTML5 视频(mp4 和 ogv)问题 - 但 Chrome 一切正常

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2643447/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 02:44:45  来源:igfitidea点击:

HTML5 video (mp4 and ogv) problems in Safari and Firefox - but Chrome is all good

firefoxvideosafarihtmlogg-theora

提问by qryss

I have the following code:

我有以下代码:

<video width="640" height="360" controls id="video-player" poster="/movies/poster.png">
 <source src="/movies/640x360.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src="/movies/640x360.ogv" type='video/ogg; codecs="theora, vorbis"'> 
</video>
  • I'm using Rails (Mongrel in development and Mongrel+Apache in production).
  • Chrome (Mac and Win) can play either file (tested by one then the other source tags) whether locally or from my production servers.
  • Safari (Mac and Win) can play the mp4 file fine locally but notfrom production.
  • Firefox 3.6 won't play the video in either OS. I just get a grey cross in the middle of the video player area.
  • I've made sure that both Mongrel and Apache in each case have the right MIME types set.
  • From Chrome's results I know there is nothing inherently wrong with my video files or the way the files are being asked for or delivered.
  • 我正在使用 Rails(开发中的 Mongrel 和生产中的 Mongrel+Apache)。
  • Chrome(Mac 和 Win)可以在本地或从我的生产服务器播放任一文件(由一个然后另一个源标签测试)。
  • Safari(Mac 和 Win)可以在本地正常播放 mp4 文件,但不能在生产环境中播放。
  • Firefox 3.6 不会在任一操作系统中播放视频。我只是在视频播放器区域的中间看到一个灰色的十字。
  • 我已经确保 Mongrel 和 Apache 在每种情况下都设置了正确的 MIME 类型。
  • 从 Chrome 的结果中,我知道我的视频文件或文件被要求或交付的方式本身没有任何问题。

For Firefox I looked at https://developer.mozilla.org/En/Using_audio_and_video_in_Firefoxwhere it refers to an 'error' event and an 'error' attribute. It seems the 'error' event is thrown pretty well straightaway and at that time there is no error attribute. Does anyone know how to diagnose the problem?

对于 Firefox,我查看了https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox,它指的是“错误”事件和“错误”属性。似乎“错误”事件被立即抛出,并且当时没有错误属性。有谁知道如何诊断问题?

采纳答案by hsivonen

The HTTP Content-Type for .ogg should be application/ogg (video/ogg for .ogv) and for .mp4 it should be video/mp4. You can check using the Web Sniffer.

.ogg 的 HTTP 内容类型应该是 application/ogg(.ogv 的 video/ogg),而 .mp4 应该是 video/mp4。您可以使用Web Sniffer进行检查。

回答by Salman Aslam

Add these lines in your .htaccess file and it will work for all browsers. Works for me.

在您的 .htaccess 文件中添加这些行,它将适用于所有浏览器。为我工作。

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

If you dun have .htaccess file in your site then create new one :) its obvious i guess.

如果您的站点中没有 .htaccess 文件,那么创建一个新的 :) 我猜这很明显。

回答by Silvia

Incidentally, .ogv files are video, so "video/ogg", .ogg files are Vorbis audio, so "audio/ogg" and .oga files are general Ogg audio, so also "audio/ogg". Checked in Firefox and work. "application/ogg" is deprecated for all audio or video uses. See http://www.rfc-editor.org/rfc/rfc5334.txt

顺便说一下,.ogv 文件是视频,所以“video/ogg”、.ogg 文件是 Vorbis 音频,所以“audio/ogg”和 .oga 文件是一般的 Ogg 音频,所以“audio/ogg”也是。在 Firefox 中检查并工作。“application/ogg”已弃用所有音频或视频用途。见http://www.rfc-editor.org/rfc/rfc5334.txt

回答by Silvia

Just remove the inner quotes - they confuse Firefox. You can just use "video/ogg; codecs=theora,vorbis".

只需删除内部引号 - 它们会混淆 Firefox。您可以只使用“video/ogg; codecs=theora,vorbis”。

Also, that markup works in my Minefiled 3.7a5pre, so if your ogv file doesn't play, it may be a bogus file. How did you create it? You might want to register a bug with Firefox.

此外,该标记适用于我的 Minefiled 3.7a5pre,因此如果您的 ogv 文件无法播放,则它可能是一个伪造文件。你是如何创造的?您可能想向 Firefox 注册错误。

回答by bogdanvursu

I see in the documentation page an example like this:

我在文档页面看到一个这样的例子:

<source src="foo.ogg" type="video/ogg; codecs=&quot;dirac, speex&quot;">

Maybe you should enclose the codecinformation with &quot;entities instead of actual quotes and the typeattribute with quotes instead of apostrophes.

也许您应该codec&quot;实体而不是实际引号将信息和type属性用引号而不是撇号括起来。

You can also try removing the codec info altogether.

您也可以尝试完全删除编解码器信息。

回答by Fei

Just need to change one letter:), rename 640x360.ogv to 640x360.ogg, it will work for all the 3 browers.

只需更改一个字母:),将 640x360.ogv 重命名为 640x360.ogg,它将适用于所有 3 个浏览器。