我在IE9中显示HTML5视频时遇到了一些麻烦,我在我的htaccess中添加了不同的类型
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
这是我的html
<video id="video" autoplay loop preload>
<source src="video/final_loop.mp4" type="video/mp4" />
<source src="video/final_loop.webm" type="video/webm" />
<source src="video/final_loop.ogg" type="video/ogg" />
Your browser does not support the <code>video</code> element.
</video>
我还尝试将视频转换为Theora ogv格式并使用
<source src="video/final_loop.theora.ogv" type="video/ogv" />
但是这个也不工作,我以为。ogg在IE9中是支持的?
ie9支持使用H.264编解码器的MPEG4。但它也要求文件可以在开始下载时立即开始播放。
以下是关于如何制作在IE9中工作的MPEG文件的基本步骤(在Ubuntu上使用avconv)。我花了很多时间才弄明白,所以我希望它能帮助到其他人。
-
使用H.264编解码器将视频转换为MPEG4。你不需要任何花哨的东西,只要让avconv为你做这项工作:
avconv -i video.mp4 -vcodec libx264 pre_out.mp4
-
这个视频将在所有支持MPEG4的浏览器上工作,除了IE9。要添加对IE9的支持,你必须将文件信息移动到文件头,这样浏览器就可以在开始下载时开始播放它。这是ie9的关键!!
qt-faststart pre_out.mp4 out.mp4
qt-faststart
是一个Quicktime实用程序,也支持H.264/ACC文件格式。它是libav-tools
包的一部分
你想在IIS上使用这个吗?
如果是,你必须添加适当的mime类型来识别你的视频文件:
<configuration>
<system.webServer>
<staticContent>
<!-- Video -->
<mimeMap fileExtension=".mp4" mimeType="video/mp4"/>
<mimeMap fileExtension=".webm" mimeType="video/webm"/>
</staticContent>
</system.webServer>
<system.web>
<compilation debug="true" targetFramework="4.0" />
</system.web>
</configuration>
以下是一些在IE9中为我工作的标记(在根文件夹中,我有一个"视频"文件夹,其中包含我的文件):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Video Demo</title>
</head>
<body>
<video id='movie'
autoplay
controls
loop
preload=auto
playbackRate="1"
width="800">
<source src="video/video.mp4" type='video/mp4' />
<source src="video/video.webm" type='video/webm' />
</video>
</body>
</html>
正如其他人提到的,IE9不支持OGV,只支持MP4和WebM(带插件)。在发现为IE9提供MP4文件时需要考虑的一件事是嵌入在MP4文件本身中的名为moov atom的文件元信息之前,我甚至在使用MP4时遇到了很多麻烦,MP4应该是本地播放的。如果它位于文件的末尾,包括ffmpeg在内的一些编码器将它放在那里,IE9将不会开始播放视频,除非下载了整个视频文件。将moov原子元数据重新定位到文件的开头,可以渐进式下载MP4文件,并且IE9可以很好地处理视频。
有一个叫做qt-faststart的工具来执行这个操作。编译和使用与ffmpeg一起分发的Linux命令行版本对我来说很神奇。
make tools/qt-faststart
sudo cp tools/qt-faststart /usr/local/bin/
qt-faststart original_file.mp4 modified_file.mp4
见本页;它为IE9
的海报问题提供了解决方案,并扩展了视频编解码器:
一些简单的CSS
和条件语句达到了目的。我现在的观点是海报应该放在视频的开始(第一帧)和结束(最后一帧),就好像它们是专辑封面一样。通过这种方式,视频开头和结尾的图像会给观众一些视觉上的想法,为什么他们应该播放视频(就像你买专辑的原因有时是因为封面)。
请注意,对于IE9,视频源必须在视频标签本身的'src'属性中给出。
我建议您专门检测IE9并将该属性添加到视频标签。你需要专门为IE9这样做,因为OSX上的Firefox不接受src标签下的MP4视频文件。
希望有帮助!
IE9不支持Ogg/Theora。如果您安装了编解码器,它将支持WebM。
在微软官方网站上有IE9视频的代码片段
<video width="400"
height="300"
src="video.mp4"
poster="frame.png"
autoplay
controls
loop>
This content appears if the video tag or the codec is not supported.
</video>