仅使用一种视频格式的HTML5视频

Adobe表示，计划在2020年底前逐步淘汰其Flash Player插件。人们说所有Flash内容都应该迁移到HTML5等其他技术上。我或多或少同意，但HTML5在完全取代Flash方面准备好了吗

让我们举一个日常的例子——网络视频播放

在Flash上，我可以为一个网站上的所有视频嵌入一个播放器，只需更改链接路径即可链接到该网站上不同视频的不同FLV视频（或MP4）。只要Flash安装在客户端，我就不必担心他们使用的是哪种浏览器

然而，对于HTML5，要实现跨浏览器兼容，AFAIK，我需要有三个视频文件（同一视频的三种不同格式-MP4、WEBM和OGG）

如果我有80+不同的视频在网站上，我将不得不在服务器上托管240+视频文件，这是相当麻烦的准备和管理文件。我讨厌每次把视频内容放到服务器上之前都把视频转换成不同的格式

现在是2017年年中，HTML5视频并不是什么新鲜事。我想知道是否有任何新的跨浏览器兼容的方法/黑客只使用一种视频格式嵌入视频播放

是新的“一个规范所有浏览器的标准”，但目前它与所有浏览器的本机支持相去甚远。一个答案是使用类似的播放器，或者给你一个polyfill，但这在支持旧浏览器方面会受到限制

如果您担心管理资产，那么有一些媒体资产管理系统可以使用单个资产并生成多种版本（例如mp4、webm、ogg以及HLS和Dash等碎片化mp4），或者您可以使用类似代码转换的工具或使用类似于

的服务来实现自己的资产管理“一个标准来规范所有浏览器”，但目前所有浏览器都不支持原生版本。一个答案是使用像的播放器或给你一个polyfill，但这将限制对旧浏览器的支持

---

如果您担心管理资产，有一些媒体资产管理系统可以使用单个资产并生成多种版本（例如mp4、webm、ogg以及HLS和Dash等碎片化mp4）或者，您可以使用转码之类的工具或使用类似于

的服务来实现自己的功能。HTML5非常适合用于视频。通过Flash使用HTML5的优势还在于在手机上播放，这在2017年绝对是必须的。要解决您的问题，您最好使用MP4（用h264和aac编码）。此视频格式在所有浏览器上都受支持（webm和ogg仅在某些浏览器上受支持）。

HTML5非常适合用于视频。通过Flash使用HTML5的优势还在于在手机上播放，这在2017年绝对是必须的。要解决您的问题，您最好使用MP4（用h264和aac编码）。此视频格式在所有浏览器上都受支持（webm和ogg仅在某些浏览器上受支持）。

@Stephen R-so true，因此使用空中引号；）@Stephen R-so-true，因此使用空中引号；）

<video id="video" controls preload="metadata" poster="img/poster.jpg">
  <source src="video/v1.mp4" type="video/mp4">
  <source src="video/v1.webm" type="video/webm">
  <source src="video/v1.ogg" type="video/ogg">
  <!-- Flash fallback -->
  <object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=video/v1.mp4" width="1024" height="576">
     <param name="movie" value="flash-player.swf?videoUrl=video/v1.mp4" />
     <param name="allowfullscreen" value="true" />
     <param name="wmode" value="transparent" />
     <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videoUrl=video/v1.mp4" />
     <img alt="My video" src="img/poster.jpg" width="1024" height="428" title="No video playback possible, please download the video from the link below" />
  </object>
  <!-- Offer download -->
  <a href="video/v1.mp4">Download MP4</a>