HTML 的 H.264/FLV 最佳实践

发布于 2024-08-31 05:51:05 字数 700 浏览 5 评论 0原文

我经营一个网站，其中包含大约 700 个参考视频（不，这不是色情片——别再胡思乱想了:-)）。

这些视频目前为 FLV 格式。我们使用 JWPlayer 来渲染这些视频。 IIS6 托管。一切都很好。

据我了解，H.264（不是 FLV，也可能不是 OGG）是新兴的首选 HTML5 视频标准。如今，iPad 实际上只支持 H.264 或 YouTube。据推测，很快许多更重要的浏览器将追随 Apple 的领导并只尊重 HTML5 标签。

好的，所以我想我可以弄清楚如何将现有视频转换为正确的 H.264 格式。有各种可用的工具，包括 ffmpeg.exe。我还没有尝试过，但我认为在摆弄编解码器设置后这不会成为问题。

我的问题更多的是关于容器本身——也就是说，为所有用户规划优雅的过渡。渲染这些视频的最佳实践建议是什么？如果我只使用 HTML5 标签，那么任何尚不支持 HTML5 的浏览器可能都看不到这些视频。如果我通过 JWPlayer 或其他播放器以 Flash 格式渲染它们，那么它们将无法在 iPad 上播放。我是否必须在这里进行丑陋的 UserAgent 检测才能确定要渲染的内容？

我知道 JWPlayer 支持 H.264 媒体，但播放器本身不是 Flash 组件，因此无法在 iPad 上播放吗？抱歉，如果我没有说清楚，但我正在摸索一个优雅的过渡计划，该计划将适用于当前的浏览器、iPad 和即将到来的 HTML5 浪潮。我不是视频专家，所以非常欢迎任何建议，谢谢。

原文

分享到QQ

分享到微博

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

发布评论

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

多谢你的绝情让我学会死心 2024-09-07 05:51:05

请注意，Firefox 不支持使用视频标签的 H.264，因此如果您想要优雅的回退，那么您应该像下面一样渲染视频标签并拥有 OGG 版本的视频。

       <video controls id="video" width="320" height="240" preload autobuffer >
            <source src="http://mycdn.com/videos/vid1.ogg" type="video/ogg" />
            <source src="http://mycdn.com/videos/vid1.mp4" type="video/mp4" />
            <!--RENDERED ON BROWSERS WITH NO HTML5 VIDEO SUPPORT-->
            <object width="320" height="240">
            <param name="movie" value="myplayer.swf">
            <embed src="myplayer.swf" width="550" height="400">
            </embed>
            </object>
             <!---->
        </video>

Be aware Firefox does not support H.264 with the Video Tag, so if you want a graceful fallback then you should render your video tag like below and have an OGG version of the video.

       <video controls id="video" width="320" height="240" preload autobuffer >
            <source src="http://mycdn.com/videos/vid1.ogg" type="video/ogg" />
            <source src="http://mycdn.com/videos/vid1.mp4" type="video/mp4" />
            <!--RENDERED ON BROWSERS WITH NO HTML5 VIDEO SUPPORT-->
            <object width="320" height="240">
            <param name="movie" value="myplayer.swf">
            <embed src="myplayer.swf" width="550" height="400">
            </embed>
            </object>
             <!---->
        </video>

回复收藏 0 原文

执着的年纪 2024-09-07 05:51:05

我不确定这是一个答案还是只是一个评论，但我确实需要挑战最初问题的假设之一：“据推测，很快许多更重要的浏览器将追随苹果的领导，只尊重 HTML5 标签。”

这是没有任何我所看到的证据支持的。

所有桌面浏览器都支持插件，包括 Flash。大多数非 Apple 智能手机/平板电脑支持 Flash、支持任意插件或支持替代浏览器。
所有浏览器，甚至 iPhone OS 浏览器，都支持对象标签，并且至少尝试用它做一些事情。他们甚至支持选框和字体标签之类的东西！对象标签还会存在很长一段时间，据我所知，它甚至是 HTML5 的一部分。
Firefox 可能是仅次于各种 IE 版本的第二大浏览器，目前不支持 H.264。
Microsoft 已经明确表示他们不喜欢 Flash，并且希望人们使用 Silverlight，这支持了我的观点，即对象标签将继续存在。他们模糊地承诺仅在 IE9 中支持原生 HTML5 视频标签。与此同时，他们将 Flash 插件作为 Vista 和 Win7 操作系统的一部分提供。

无论如何，为了解决问题的实质：“我的问题更多是关于容器本身 - 也就是说，为所有用户规划优雅的过渡。渲染这些视频的最佳实践建议是什么”

HTML5 视频标签支持命名多个源，因此如果浏览器不支持直接 H.264 视频流，您可以将本机 H.264 视频作为“主要”视频，将 Flash 播放器作为要使用的“后备”视频。

<video>
<source src="../videos/primary.mp4" type="video/mp4" />
<object>
    <param name="movie" value="fallbackplayer.swf">
    <embed src="../videos/fallbackplayer.swf">
    </embed>
</object>
</video>

I'm not sure if this is an answer or just a comment, but I really need to challenge one of the assumptions of the original question: "Presumably, soon many more important browsers will follow Apple's lead and respect only the HTML5 tag."

This just isn't backed up by anything that I can see.

All desktop browsers support plugins, including Flash. Most non-Apple smartphones/tablets support Flash, support abitrary plugins, or support alternative browsers.
All browsers, even the iPhone OS one, support the object tag and at least attempt to do something with it. They even support things like marquee and font tags! The object tag will be around for a long long time yet, and as far as I know is even part of HTML5.
Firefox, probably the #2 browser after the various IE versions, is not supporting H.264 at this time.
Microsoft has made it clear that they dislike Flash and would prefer people to use Silverlight, backing up my feeling that the object tag is here to stay. They have vaguely committed to supporting native HTML5 video tags only in IE9. In the meantime, they ship the Flash plugin as part of the OS on Vista and Win7.

Anyway, to get to the real meat of the question: "My question is more about the container itself -- that is, planning graceful transition for all users. What's the best-practice recommendation for rendering these videos"

The HTML5 video tag supports naming multiple sources, so you can put the native H.264 video as the 'primary' and the Flash player as the 'fallback' to be used if the browser does not have support for the straight H.264 video stream.

<video>
<source src="../videos/primary.mp4" type="video/mp4" />
<object>
    <param name="movie" value="fallbackplayer.swf">
    <embed src="../videos/fallbackplayer.swf">
    </embed>
</object>
</video>

回复收藏 0 原文