2013年10月9日
By 1月时特约编辑
专题文章

视频教程:支持HTML5与Flash回退在Sorenson挤9

对于那些需要一种简单的方法来创建在桌面和移动设备上播放的视频的网站来说，带Flash回退的HTML5是一个很好的选择. 如果你想使用HTML5与Flash回退, Sorenson Squeeze 9提供简单的高质量解决方案. Squeeze 9有多个版本，它们是对以前版本的合理升级. 看挤压9, 主要的新特性包括简化的工作负载, 卷前和卷后拼接(这使得在视频的开头和结尾添加自定义消息变得容易), 隐藏式字幕支持, 针对HTML5进行优化, 我们将在本教程中探索哪个特性.

下面是它的工作原理. 我们要编码一段很短的视频是我女儿在元旦拍摄的. 我们将尝试对该文件进行编码，以便它能够在所有浏览器上播放，无论是否与html5兼容, 移动设备. 为了支持这一点，Sorenson在格式选项卡中创建了一个名为HTML5视频的新类别. 有两种预设(图1). 你可以自定义这些, 你可以创建自己的, 如果你经常使用它们，你可以把它们放在你的收藏夹里. 我们将使用更高的数据速率版本的360p预设. 和所有索伦森挤压预设一样, 通过将其拖拽到压缩窗口中来应用它, 双击它以调出编码参数.

图1. 挤9的HTML5视频类别包括两个预设. 您可以自定义它们或添加自己的.

这里的关键是，Squeeze创建了两个文件，一个是H.一个264文件和一个WebM文件. 在H.264，你可以从主概念H中选择.264文件，CUDA编解码器(使用GPU硬件加速)，或X.264编解码器(图2). 该文件将在IE10, IE9, Safari和Chrome中播放. 它也将在所有的移动设备上运行，因为最近所有的智能手机和平板电脑——无论是iOS, 安卓, 或windows -播放H.264编解码器通过HTML5.

图2. 挤压创建两个文件，H.264和WebM. 在H范围内.264输出选项，您可以从MainConcept, MainConcept CUDA和x中选择.264编解码器

另一个输出是VP8文件. 这是将在两个不支持H的浏览器中播放的WebM文件.264、火狐和Opera. Sorenson将对两个文件应用相同的基本编码参数, 600 Kbps, 一次通过的VBR, 96 Kbps单声道音频, 640 x 360. 如果您想更改这两个文件中的任何一个，您当然可以. 如果您想为任意一个文件定制编码参数，您也可以这样做.

如果你喜欢X.264，您可以很好地访问该编解码器可用的所有不同配置参数, VP8也是如此. Sorenson在几个版本前做得很好，他们添加了VP8支持，可以复制你在Google命令行和编码界面中可以访问的几乎所有功能. 所以你可以很容易地接触到所有的配置参数, 而Squeeze在制作高质量游戏方面做得很好, 非常高效的文件, 这意味着它们达到了目标数据速率, 而且视频质量通常与所有其他编码工具相比都很有竞争力. 只需命名文件，然后按“保存”，然后按“压缩”对文件进行编码.

图3. 看看Squeeze在进行编码时创建的各种文件，包括HTML代码(Disney . HTML).html).

您可以看到Squeeze创建的所有文件(图3). 有一个Squeeze项目文件，我们可以忽略它. 这是WebM文件, 这是MP4文件, 这是用于Flash播放的SWF文件, 这是HTML代码. 如果你在像TextWrangler这样的程序中打开这个文件, 您将看到Squeeze创建并插入到我们刚刚打开的HTML文件中的代码, 包括著名的HTML5视频标签(图4). Squeeze告诉我们MP4文件可以在ie9, IE10和Safari中播放. Chrome也可以播放MP4文件.

图4. 当您在TextWrangler中打开HTML代码文件时，您将看到以下内容.

然后我们看到了Firefox和Chrome的WebM文件，然后是Flash备份. 这就是代码, 如果浏览器不兼容HTML5, 会告诉浏览器播放Flash版本的文件吗, 显然哪个是H.264版本或MP4文件.

You could do this manually; there’s nothing magical about it. 但如果你不是程序员，这可能会变得相当复杂, 经过多次试验和错误, 因此，Squeeze所做的是创建一种非常有效的方法，既可以对两个文件进行编码，又可以创建必要的HTML文件. 一旦你有了这个, 打开FTP工具, 你把文件拖到你的网站上, 这样就完成了.

现在，当我们尝试在各种浏览器和各种移动设备上播放这个时，会发生什么呢? 好吧, 如果你去一台旧电脑, 比如使用ie6的手机，根据NetMarketShare的数据, 仍然有大约百分之六的已安装的基本浏览器在那里-并右键单击视频文件, 你会看到IE6正在调用Flash播放器来播放这个文件(图5). 这就是我们多次谈到的闪电式退路. 如果浏览器不兼容html5，它将调用Flash来播放视频文件.

图5. 如果浏览器不兼容html5, 例如这里显示的IE6, 尝试播放文件, 它会退回到Flash版本.

在当前的浏览器上，它可以播放H.264文件或本地的WebM文件. 如果你在Chrome中打开视频, 右键单击并选择“另存视频为”,，你会看到Chrome正在播放MP4文件. 早在2011年1月，谷歌就宣布他们将放弃H.Chrome版264. 他们还没有，我猜他们永远也不会.

如果我们看一下Firefox，你会看到Firefox正在运行WebM版本. 如果尝试在Opera中右键单击, 它将保存在HTML文件中, 这说明不了什么, 但由于Opera不播放H.如果是原生的264，那么很有可能是在播放WebM文件. 最后, 如果你打开Safari浏览器, 没有右键命令可用, 但由于Safari是HTML5兼容的，只播放H.264，显然是在放H音.也是264文件.

那么移动设备呢? 该视频应该可以在所有ipad和iphone上播放, 它应该可以在几乎所有最近发布的安卓设备上运行, 因为他们都支持H.264播放，它们都支持HTML5.

基本上, 只要你不需要像自适应流这样的功能, 封闭字幕或DRM支持HTML5与Flash回退是一个很好的选择. 正如你所看到的, 挤9使得支持HTML5与Flash回退非常容易实现