Question

我必须开发一个可在所有主流浏览器（Chrome，Firefox，IE9，Safari和Opera）上运行的html5应用程序，其中一项要求是能够播放视频。我正在使用视频标签和他们提供的两种不同格式的视频：

<video width="640" height="360" controls autoplay="autoplay">
    <source src="../videos/grafico.ogg" type="video/ogg"/>
    <source src="../videos/grafico.mp4" type="video/mp4"/>
    Your browser doesn't support video
</video>

我的问题是这只能在IE上运行。在Chrome，Firefox和Opera上，它会打开播放器但图像为黑色。在Safari上，它只显示“您的浏览器不支持视频”消息。我也试过使用videojs，但黑屏问题仍然存在。这是在本地播放时发生的（我无法访问服务器）。

我不知道我做错了什么，也不知道如何开始处理视频。有谁知道我应该做什么？

Answer 1

首先，您需要先放置MP4源。在较旧的iPad上存在一个问题，它们不会超过列表中的第一个来源。

对于Chrome，Firefox和Opera，它可能是ogg文件本身的问题，也可能是服务器为该文件发送的MIME类型。检查以确保ogg将在其他地方播放，如VLC。

如果是，请将扩展名更改为.ogv。这不应该有所作为，但它更正确。然后将这些行添加到.htaccess文件中。这来自HTML5 Boilerplate。

# Audio
AddType audio/mp4                      m4a f4a f4b
AddType audio/ogg                      oga ogg

# Video
AddType video/mp4                      mp4 m4v f4v f4p
AddType video/ogg                      ogv
AddType video/webm                     webm
AddType video/x-flv                    flv

这似乎是ogg文件无法在HTML5视频中播放的第一个原因。

作为旁注，您可能还想考虑制作WebM文件，或者使用而不是使用Ogg。它具有更好的压缩质量比。您可以使用Firefogg.org免费创建WebM。

我不明白为什么IE会播放MP4而Safari也不会，但希望这些也解决了这个问题。欢呼声。

Answer 2

<video width="320" height="240" controls="controls" autoplay="autoplay">

试试这种方式。在所有浏览器中都经过测试，适合我。

HTML5视频仅适用于IE。其他浏览器显示黑屏

2 个答案: