在网站上提供视频的最佳方式是什么？

Question

我想在我的网站上播放一些视频。它们是从FlipShare相机获取的.MP4文件。

现在我尝试将它们转换为WMV格式（成功了，但当在<object id='mediaPlayer' width='320' height='285' classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95' 等等标签中嵌入html时，用户必须安装插件，而且在网站上使用10个Windows Media Player的用户体验并不好。）

然后我看了看YouTube，想知道他们是如何做到的，但我无法弄清他们将视频转换为什么格式。

所以我的问题是：我需要将视频转换为什么格式才能在不需要在用户浏览器中安装播放器的情况下显示它。我需要什么工具以及嵌入这样一个视频的HTML代码是什么？

正如你所看到的：从头开始。

PS：我经常听到：“这个或那个文件扩展名只是一个容器，里面可以有任何东西。”如果你在回答中使用这个，请你解释一下，因为我从来没有理解过这个。对我来说，.cs是一个C#文件，.doc是一个Word文件，而不是“一个容器”。

- Michel

---

即使使用YouTube，您仍需要Adobe Flash，对吗？ - Raj More

我想，是的，但我不确定...我听说过Flash（SWF）和FLV，但要使用什么工具以及如何嵌入它们？ - Michel

他们使用什么技术？你可以在iPad上观看他们的视频，所以他们肯定不使用Flash... - dclowd9901

如果你完全没有经验，最简单的方法就是去Youtube（或Vimeo，或其他一些视频分享网站）。 - Joel L

纽约时报和其他网站使用H.264视频（通常是.m4v文件），可以通过Flash或使用<video />元素进行服务。 - Joel L

Answer 1

这并不是一个简单的问题。基本的答案是，你需要使用用户电脑已经支持的格式。对于这个问题，并没有一个标准答案。YouTube将视频编码为MP4格式，并使用基于Flash的电影播放器嵌入到页面中，Flash得到了广泛的支持，但你会注意到，在许多移动平台上并不支持Flash - 因此，如果你选择Flash路线，任何使用iPhone的人都无法观看。

HTML5引入了video标签，旨在一劳永逸地解决这个问题，但即便如此，仍然存在一个小问题 - 大多数支持HTML5的浏览器只支持h.264编码的视频，而Mozilla则支持Ogg Theora。YouTube目前正在尝试使用基于<video>标签的播放器，因此这似乎是未来的发展方向。

我认为当前最佳实践是将视频编码为h.264，尝试作为<video>元素进行服务，如果不起作用，则使用基于Flash的播放器作为备选方案（可以播放相同的h.264文件），以支持尽可能多的人。

- Chuck

---

有时候你希望得到一个简单的答案，但在一些“不那么容易的问题”上，大多数情况下这是不可能的 :-) 我会考虑一下这个问题... - Michel

Answer 2

目前最流行的解决方案是H.264编码的Flash视频，这个解决方案被YouTube和其他主要视频门户网站所采用。Flash可以播放视频，从版本8或9开始，并已获得了显著的市场份额。

我个人最喜欢的Flash播放器是LongTail Player，但它不允许商业使用。

这里有一个SO问题，列出了包括开源播放器在内的基于Flash的播放器列表。

然而，Flash无法在iPhone和iPad上播放。

如果您想支持安装了Flash Player 9的计算机（我看到过一些，但没有确切数字），则需要对FLV文件进行编码（使用一个名为Sorenson的编解码器）。

即将推出的替代方案是HTML 5视频，但浏览器对其的支持还远未达到主要市场份额。

- Pekka

---

谢谢，另一个SO问题的链接也帮了很多忙。 你是否知道.SWF和.FLV格式之间的区别，以及如何将我的.MP4文件转换为这种格式？ - Michel

我不是视频处理方面的专家，你可能在Superuser.com上会有更好的运气。无论如何，据我所知，FLV使用Sorenson编解码器，比MP4性能差（SWF只是Flash容器格式，而不是视频格式）。如果您可以要求用户使用Flash 10，则考虑使用MP4。无论如何，“ffmpeg”是一个非常强大的开源工具，应该能够编码FLV和MP4，但它非常高级，需要很多视频知识；“Avidemux”带有GUI：http://en.wikipedia.org/wiki/Avidemux，但无法编码FLV（仅限MP4）。我最喜欢的商业产品是Ulead/Corel VideoStudio。 - Pekka

Answer 3

现在已经不是2010年了，大多数视频托管网站使用的是HTML5视频（以及作为周期性XHR请求的响应发送的基于块的视频，例如Youtube），因此这个问题需要重新回答。虽然没有最好的方法来添加视频到您的网站中，但是Flash在撰写本答案时绝对不是一个好的选择。

简单而未经研究的答案是：只需使用video标签即可！

这很简单直观，并且在许多用例中应该可以正常工作。

经过研究的答案是：不幸的是，需要将视频上传到Youtube并在您的网站上嵌入它。

在使用Youtube嵌入而不仅仅使用video标签的优缺点：

优点：

- 允许您以多种质量提供视频。 - 带宽效率非常高。由于Youtube重新编码视频，因此对于用户来说，Youtube是带宽效率高的，对于您来说也是如此，因为您将不再从自己的托管中提供视频。 - 提供诸如关闭字幕、自动字幕、多倍速播放、全屏播放器等功能。

缺点：

• 这是一个非常重度货币化的服务，如果视频内容不是完全原创的，他们很可能会在您的视频上放置广告。
• 它有非常严格的法律和条款，至少在我看来需要遵守。
• 它会追踪您的用户。如果您的应用程序需要保护隐私并且无法依靠用户自己保护，则Youtube并不理想。

其他混合了这两个选项的优点和缺点的替代方案包括：

• 使用JavaScript视频库获取HTML5视频以及使用Youtube的一些优点，但没有其缺点。
• 在服务器端使用FFMPEG以解决带宽问题。
• 使用某些支持视频的CDN来传递视频，以解决可靠性和带宽问题。我目前最喜欢的是依赖服务工作者和比特流协议从用户之间进行流媒体传输的CDN，但是否适合您取决于您的应用程序。
• 使用AWS存储服务来存储视频，并使用AWS网关/CDN服务来提供服务，这可能是一种非常经济高效的解决方案，如果您不想使用Youtube但也不想将视频存储在为您的网站提供服务的基础架构上。

这个答案的来源：个人经验。虽然我不想从经验中回答，但这个问题确实需要一个新的答案！请随意用更具体的内容进行编辑。

- mmdts

Answer 4

将您的视频转换为MPEG-4与H.264格式，可在桌面和移动设备上获得当前浏览器的97％覆盖率，尽管某些Android设备不支持该格式的硬件加速。为了解决这个问题，您可以使用带有VP9编解码器的WebM。

我写了一个关于浏览器支持的摘要，可能会有用：https://stuartk.com/posts/whats-the-best-html-video-format-to-serve/

- Stuart K