javascript 如何在所有主流浏览器中播放 mp4 视频？

How to play mp4 video all major browsers?

提问by Homo Sapien

Is there any way to make .mp4video work in all major browsers? I heard that videojscan help me but I am not sure. Will this library automatically set the flash as a callback if the video format is not supported for the browser? Has any used it before? Please help.

有没有办法让.mp4视频在所有主要浏览器中都能正常工作？我听说videojs可以帮助我，但我不确定。如果浏览器不支持视频格式，该库是否会自动将 flash 设置为回调？以前有人用过吗？请帮忙。

回答by Mick

At one level you could probably say that mp4 will already work in most major browsers, but, unfortunately, things are not that simple.

在某种程度上，您可能会说 mp4 已经可以在大多数主要浏览器中运行，但不幸的是，事情并没有那么简单。

mp4 is a 'container' and the video and audio in it may be encoded with various codecs which you will need to check your browser supports (most support h.264) and even the same codec using different settings (e.g. baseline vs mainline profiles).

mp4 是一个“容器”，其中的视频和音频可能使用各种编解码器进行编码，您需要检查浏览器是否支持（大多数支持 h.264）甚至使用不同设置的相同编解码器（例如基线与主线配置文件） .

There are also techniques to move the metadata to the start of the mp4 file to allow it stream immediately before the whole file has downloaded - without this it may appear that your video will not play (or it may even not play). See: http://multimedia.cx/eggs/improving-qt-faststart/

还有一些技术可以将元数据移动到 mp4 文件的开头，以允许它在整个文件下载之前立即流式传输 - 否则，您的视频可能无法播放（甚至可能无法播放）。见：http: //multimedia.cx/eggs/improving-qt-faststart/

In fact it is probably possible to create an mp4 which will not play in any major browser.

事实上，有可能创建一个无法在任何主流浏览器中播放的 mp4。

As Keizom say's best current practice is to provide multiple sources of a video in formats that are known to work with current major browsers.

正如 Keizom 所说，当前的最佳做法是以已知可与当前主要浏览器一起使用的格式提供多个视频源。

It's also worth nothing that the playing field keeps changing as browsers and video format evolve - for example a video player which used or fell back to Silverlight just a short time ago will now no longer work on some of the most popular browsers as they no longer support Silverlight.

随着浏览器和视频格式的发展，竞争环境不断变化也是毫无价值的 - 例如，不久前使用或退回到 Silverlight 的视频播放器现在将不再适用于一些最流行的浏览器，因为它们不再支持银光。

To see the current picture you need to check some of the sites that are updated regularly in line with browser changes. Two good examples are:

要查看当前图片，您需要检查一些根据浏览器变化定期更新的站点。两个很好的例子是：

• http://camendesign.com/code/video_for_everybody/test.html
• https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

• http://camendesign.com/code/video_for_everybody/test.html
• https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

You can still achieve this while allowing your users to upload just one format (this is what popular video hosting site do). You simply need to convert their uploaded video into the minimum set of formats you need to support the browser set you want to hit.

您仍然可以实现这一点，同时允许您的用户只上传一种格式（这是流行的视频托管网站所做的）。您只需将他们上传的视频转换为支持您想要点击的浏览器集所需的最少格式集。

Note that if you are worried about quality of playback on different devices and with different network conditions then you may actually have to provide multiple bit rate versions of each video format (so the client can switch between bit rates as network conditions change).

请注意，如果您担心不同设备和不同网络条件下的播放质量，那么您实际上可能必须为每种视频格式提供多个比特率版本（因此客户端可以随着网络条件的变化在比特率之间切换）。

Of course, this makes your server side more complicated and also uses a fair amount of computing power, so you need to decide if your use cases justifies this investment/effort.

当然，这会使您的服务器端更加复杂，并且还使用了大量的计算能力，因此您需要确定您的用例是否值得进行这项投资/努力。

回答by deleted user

Whether the .mp4will "work" or not depends on the OS & browser. Cross-OS/browser support is achieved by supplying multiple sources.

是否.mp4会“工作”取决于操作系统和浏览器。跨操作系统/浏览器支持是通过提供多个源来实现的。

<video>
    <source src="foobar.mp4" type="video/mp4" />
    <!-- some other alternative sources -->
    <source src="foobar.ogv" type="video/ogv" />
</video>