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

时间:2017-07-26 06:54:13

标签: html5 video

Adob​​e表示计划在2020年底之前逐步淘汰其Flash Player插件。人们表示,所有Flash内容都应该迁移到其他技术,如HTML5。我或多或少同意,但是在完全替换Flash时HTML5有多准备好了?

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

在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视频并不是什么新鲜事。我想知道是否有任何新的跨浏览器兼容方法/ hack只使用一种视频格式嵌入视频播放?

2 个答案:

答案 0 :(得分:3)

HTML5已经为视频做好了准备。使用HTML5而不是Flash的优势还在于在2017年必须在移动设备上播放。对于您的问题的解决方案,您可以做的最好是使用MP4(用h264和aac编码)。所有浏览器都支持此视频格式(某些浏览器仅支持webm和ogg)。

答案 1 :(得分:0)

MPEG-DASH是新的“统治所有标准的一个标准”,但它目前支持所有浏览器的原生支持。一个答案是使用像OoyalaShaka.js这样的播放器给你一个polyfill,但这对于支持旧版浏览器来说是有限的。

如果您担心管理资产,可以使用单一资产并生成各种版本的媒体资产管理系统(例如mp4,webm,ogg以及碎片化的mp4,例如HLS和Dash)或者您可以使用ffmpeg等内容进行转码或使用Azure Media Service

等服务