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

【问题标题】：HTML5 video using only one video format仅使用一种视频格式的 HTML5 视频
【发布时间】：2017-07-26 06:54:13
【问题描述】：

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

让我们举一个日常示例 - 网络上的视频播放。

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

但是对于 HTML5，为了跨浏览器兼容，AFAIK，我需要三个视频文件（同一视频的三种不同格式 - MP4、WEBM 和 OGG）。

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

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

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

【问题讨论】：

标签： html video

【解决方案1】：

HTML5 已经为视频做好了充分的准备。与 Flash 相比，使用 HTML5 的优势还在于可以在移动设备上播放，这在 2017 年绝对是必须的。要解决您的问题，您可以做的最好的事情是使用 MP4（使用 h264 和 aac 编码）。所有浏览器均支持此视频格式（仅部分浏览器支持 webm 和 ogg）。

【讨论】：

【解决方案2】：

MPEG-DASH 是新的“一个标准来统治所有这些”，但目前它与所有浏览器的原生支持相距甚远。一个答案是使用像Ooyala's 或Shaka.js 这样的播放器来给你一个polyfill，但这会限制对旧浏览器的支持。

如果您担心管理资产，可以使用媒体资产管理系统来处理单个资产并生成各种版本（例如 mp4、webm、ogg 以及 HLS 和 Dash 等分段 mp4），或者您也可以使用ffmpeg 之类的东西进行转码或使用Azure Media Service 之类的服务来滚动您自己

【讨论】：

@Stephen R - 如此真实，因此空中报价;)