HTML5视频只能在IE中使用。其他浏览器显示黑屏 [英] HTML5 video only works in IE. The other browsers shows the black screen

问题描述

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

I have to develop an html5 application that runs on all major browsers (Chrome, Firefox, IE9, Safari and Opera) and one of the things requested was for it to be able to play videos as well. I'm using the video tag and 2 different formats of the video they provided:

<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，但黑屏问题仍然存在。
这是在本地播放时发生的（我没有访问服务器）。

My problem is this only runs on IE. On Chrome, Firefox and Opera it opens the player but the image is black. And on Safari it only shows the "Your browser doesn't support video" message. I've also tried to use videojs, but the black screen problem persists. This is occurring while playing locally by the way (I don't have access to the server).

我不知道我在做什么，我也不知道如何处理视频开始。有人知道我应该做什么吗？

I have no idea what I'm doing wrong, nor do I have much knowledge on how to handle video to begin with. Does anyone know what I should do?

推荐答案

首先，你需要把你的MP4源。在旧的iPad上有一个问题，他们不会超过列表中的第一个来源。

First, you'll want to put your MP4 source first. There was an issue on older iPads where they wouldn't look past the first source in the list.

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

For Chrome, Firefox, and Opera, it's probably either an issue with the ogg file itself or the MIME type being sent by your server for that file. Check to make sure the ogg will play elsewhere, like VLC.

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

If it does, change the extension to .ogv. That shouldn't make a difference, but it's more right. Then add these lines to you .htaccess file. This is from the 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视频。

That seems to be the #1 reason ogg files don't play in HTML5 video for people.

另外，您可能想要考虑也制作一个WebM文件，或使用而不是Ogg。它具有更好的压缩质量比。您可以使用 Firefogg.org 免费制作WebM。

As a side note, you might want to consider also making a WebM file, or using instead of Ogg. It has a better compression to quality ration. You can use Firefogg.org to make a WebM for free.

我不明白为什么IE会玩MP4和Safari不会，但希望这些修复这个问题。干杯。

I can't see why IE would play the MP4 and Safari wouldn't, but hopefully these fix that issue too. Cheers.

这篇关于HTML5视频只能在IE中使用。其他浏览器显示黑屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！