Html IE9 HTML5 视频支持
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7913377/
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
IE9 HTML5 video support
提问by woutr_be
I'm having some trouble displaying HTML5 video in IE9, I added the different types to my htaccess
我在 IE9 中显示 HTML5 视频时遇到了一些问题，我在 htaccess 中添加了不同的类型
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
This is what I have as html
这就是我所拥有的 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>
I also tried converting the video to Theora ogv format and use
我还尝试将视频转换为 Theora ogv 格式并使用
<source src="video/final_loop.theora.ogv" type="video/ogv" />
But this doesn't work either, I thought .ogg was supported in IE9?
但这也不起作用，我认为 .ogg 在 IE9 中受支持？
采纳答案by Davide Aversa
On the official Microsoft website there is this code snippets for video on IE9
在 Microsoft 官方网站上，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>
Try with this code.
尝试使用此代码。
回答by Gael Lafond
Internet Explorer 9 support MPEG4 using H.264 codec. But it also required that the file can start to play as soon as it starts downloading.
Internet Explorer 9 支持使用 H.264 编解码器的 MPEG4。但它也要求文件一开始下载就可以开始播放。
Here are the very basic steps on how to make a MPEG file that works in IE9 (using avconv on Ubuntu). I spent many hours to figure that out, so I hope that it can help someone else.
以下是有关如何制作可在 IE9 中运行的 MPEG 文件的基本步骤（在 Ubuntu 上使用 avconv）。我花了很多时间来解决这个问题，所以我希望它可以帮助别人。
Convert the video to MPEG4 using H.264 codec. You don't need anything fancy, just let avconv do the job for you:
avconv -i video.mp4 -vcodec libx264 pre_out.mp4This video will works on all browsers that support MPEG4, except IE9. To add support for IE9, you have to move the file info to the file header, so the browser can start playing it as soon as it starts to download it. THIS IS THE KEY FOR IE9!!!
qt-faststart pre_out.mp4 out.mp4
使用 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-faststartis a Quicktime utilities that also support H.264/ACC file format. It is part of libav-toolspackage.
qt-faststart是一个 Quicktime 实用程序，也支持 H.264/ACC 文件格式。它是libav-tools包的一部分。
回答by Chris Ching
Are you trying to use this on IIS?
你想在 IIS 上使用它吗？
If so, you have to add the appropriate mime types to recognize your video files:
如果是这样，您必须添加适当的 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>
Here's some markup that works for me in IE9 (in the root folder, i have a "video" folder with my files):
这是一些在 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>
回答by Viktor
As others have mentioned, IE9 doesn't support OGV, only MP4 and WebM (with plugin). I encountered a lot of trouble even with the MP4, which should play natively, before finding out that one thing to consider when serving MP4 files for IE9 is the file meta information called moov atom embedded in the MP4 file itself. If it's located at the end of the file, where some encoders including ffmpegplaces it, IE9 will not start playing the video unless the whole video file downloaded. Relocating the moov atom metadata to the beginning of the file enables progressive download of the MP4 file, and IE9 handles the video nicely.
正如其他人提到的，IE9 不支持 OGV，仅支持 MP4 和 WebM（带插件）。即使使用本机播放的 MP4，我也遇到了很多麻烦，然后才发现在为 IE9 提供 MP4 文件时要考虑的一件事是嵌入在 MP4 文件本身中的名为 moov atom 的文件元信息。如果它位于文件的末尾，包括ffmpeg在内的一些编码器将它放在那里，除非下载整个视频文件，否则 IE9 将不会开始播放视频。将 moov atom 元数据重新定位到文件的开头可以实现 MP4 文件的渐进式下载，并且 IE9 可以很好地处理视频。
There's a tool called qt-faststartto perform this operation. Worked wonders for me, compiling and using the Linux command-line version distributed with ffmpeg.
有一个名为qt-faststart的工具可以执行此操作。为我创造了奇迹，编译和使用了与 ffmpeg 一起分发的 Linux 命令行版本。
make tools/qt-faststart
sudo cp tools/qt-faststart /usr/local/bin/
qt-faststart original_file.mp4 modified_file.mp4
回答by Mike S
See thispage; it provides a solution to the poster issue with IE9, and expands on video codecs:
请参阅此页面；它为海报问题提供了解决方案IE9，并扩展了视频编解码器：
Some simple CSSand conditional statements did the trick. I'm now of the opinion posters should be placed at the beginning (first frame) and end (last frame) of a video, as if they were album covers. In this way, an image at the beginning and end of the video will give the viewer SOME visual idea of why they should play the video (just like the reason you buy an album sometimes is because of the cover).
一些简单的CSS条件语句可以解决问题。我现在认为海报应该放在视频的开头（第一帧）和结尾（最后一帧），就好像它们是专辑封面一样。通过这种方式，视频开头和结尾的图像可以让观众直观地了解为什么他们应该播放视频（就像你购买专辑的原因有时是因为封面）。
回答by Marble Daemon
Please be aware that for IE9, the video source must be given in the 'src' attribute of the video tag itself.
请注意，对于 IE9，视频源必须在视频标签本身的 'src' 属性中给出。
I suggest that you detect IE9 specifically and add that property to the video tag. You need to do it specifically for IE9 because Firefox on OSX won't accept the MP4 video file in src tag.
我建议您专门检测 IE9 并将该属性添加到视频标签中。您需要专门为 IE9 执行此操作，因为 OSX 上的 Firefox 不接受 src 标签中的 MP4 视频文件。
Hope it helps!
希望能帮助到你！
