IE9 HTML5 视频支持

发布于 2024-12-12 07:20:43 字数 739 浏览 6 评论 0原文

我在 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" />

但这也不起作用，我想。 IE9支持ogg吗？

原文

I'm having some trouble displaying HTML5 video in IE9, I added the different types to my htaccess

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

This is what I have as 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

<source src="video/final_loop.theora.ogv" type="video/ogv" />

But this doesn't work either, I thought .ogg was supported in IE9?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

眼眸里的快感 2024-12-19 07:20:43

Internet Explorer 9 支持使用 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 包的一部分。

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.

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.

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.mp4
```
This 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
```

qt-faststart is a Quicktime utilities that also support H.264/ACC file format. It is part of libav-tools package.

回复收藏 0 原文

伏妖词 2024-12-19 07:20:43

您想在 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 中适用于我的标记（在根文件夹中，我有一个包含文件的“video”文件夹）：

<!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>

Are you trying to use this on IIS?

If so, you have to add the appropriate mime types to recognize your video files:

<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):

<!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>

回复收藏 0 原文

没︽人懂的悲伤 2024-12-19 07:20:43

正如其他人提到的，IE9 不支持 OGV，仅支持 MP4 和 WebM（带插件）。在发现为 IE9 提供 MP4 文件时需要考虑的一件事是嵌入在 MP4 文件本身中的名为 moovatom 的文件元信息之前，我甚至在使用本机播放的 MP4 时也遇到了很多麻烦。如果它位于文件末尾，包括 ffmpeg 在内的一些编码器将其放置在该位置，则 IE9 将不会开始播放视频，除非下载整个视频文件。将 moovatom 元数据重新定位到文件的开头可以实现 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

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 ffmpeg places 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.

There's a tool called qt-faststart to perform this operation. Worked wonders for me, compiling and using the Linux command-line version distributed with ffmpeg.

make tools/qt-faststart
sudo cp tools/qt-faststart /usr/local/bin/
qt-faststart original_file.mp4 modified_file.mp4

回复收藏 0 原文

审判长 2024-12-19 07:20:43

请参阅此页面；它为 IE9 的海报问题提供了解决方案，并扩展了视频编解码器：

一些简单的 CSS 和条件语句就达到了目的。我现在认为海报应该放置在视频的开头（第一帧）和结尾（最后一帧），就像专辑封面一样。通过这种方式，视频开头和结尾的图像将为观看者提供一些关于为什么应该播放视频的视觉想法（就像您有时购买专辑的原因是因为封面一样）。

回复收藏 0 原文

骷髅 2024-12-19 07:20:43

请注意，对于 IE9，视频源必须在视频标签本身的“src”属性中给出。

我建议您专门检测 IE9 并将该属性添加到视频标签中。您需要专门针对 IE9 执行此操作，因为 OSX 上的 Firefox 不接受 src 标记中的 MP4 视频文件。

希望有帮助！

回复收藏 0 原文

娇俏 2024-12-19 07:20:43

IE9 不支持 Ogg/Theora。如果您将支持WebM /" rel="nofollow">安装编解码器。

回复收藏 0 原文

你对谁都笑 2024-12-19 07:20:43

在 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>

尝试使用此代码。

On the official Microsoft website there is this code snippets for video on 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.

回复收藏 0 原文

~没有更多了~