IE9 HTML5视频支持



我在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)。我花了很多时间才弄明白,所以我希望它能帮助到其他人。

  1. 使用H.264编解码器将视频转换为MPEG4。你不需要任何花哨的东西,只要让avconv为你做这项工作:

    avconv -i video.mp4 -vcodec libx264 pre_out.mp4
    
  2. 这个视频将在所有支持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>

最新更新