2016年7月20日
By 1月时特约编辑
专题文章

When it Comes to HTML5 Playback, the Devil's in the Details

和我们期望的标准一样 HTML5 to simplify our jobs, oftentimes they don’t. 事实上, a recent HTML5-related project convinced me that the term “multivendor standard” is an oxymoron. Any standard involving multiple vendors means different implementations, which challenges anyone trying to use the standard.

故事是这样的. A consulting client ran periodic projects that involved videos from multiple disparate sources in multiple resolutions and formats, 包括AVI, MOV, WMV, 英里/加仑, 和MP4. 每个项目完成后, the client wanted to make the video files available on its intranet for anyone to download, and it wanted me to create a streamable version for quick preview. 简化部署过程, the client didn’t want to create separate pages or embedded windows for the videos; it just wanted one PDF file with links to original downloadable and streamable versions.

似乎是为HTML5量身定制的，对吧? Encode to MP4 and create the links, and the files should play in all modern browsers. I ran some preliminary tests that seemed promising, so the client provided about 15 random test files and I began writing the FFmpeg encoding script.

我先从视频方面开始, focusing on how to create a single script that preserved the disparate source aspect ratios in the final encoded files. 我很快找到了解决办法, 对15个文件进行编码, 把它们上传到一个试验场, 创建了一个带有链接的PDF文件, 然后开始测试. Internet Explorer (IE) was the primary browser the client used, and I tested on two HP machines in my office—a notebook and a workstation. All files played except one; it was from a very sketchy screencam-based source. 在笔记本上, 然而, Windows Media Player played all successful files in a separate window, 在工作站上, the videos played in an embedded QuickTime window. I tried playing the files in Edge, and all but the problem file played in an embedded HTML5 Window. I tried opening them in Chrome, and all files played in an HTML5 window, even the sketchy one.

Before attempting to debug the problem file, I asked the client to try it on his computers, feeling pretty confident it would work. On every Windows computer in his office, 13 files failed and two played. 错误信息是这样的, “无法播放/错误C00D11B1,” a generic error with fixes ranging from registry tweaks to complete Windows reinstalls. 肯定不好. 在Firefox中, 哪个是公司的备用浏览器, 10个文件播放，5个文件失败, 显示错误消息, “video can’t be played because the file is corrupt.“有趣的是, I could duplicate the Firefox errors on my Windows workstation, but the files played correctly on my Mac Pro.

Once you scratch beneath the surface of HTML5, you realize that it means many decidedly nonstandard things on many different computers. 例如, 在IE中, you can choose different players installed on the system to play MP4 files, 但不是, 据我所知, IE本身. Ditto with Firefox, which makes sense because Mozilla never licensed H.264年回放. So supporting a single HTML5 browser could mean supporting multiple players.

长话短说, the problem with Firefox was caused by 96kHz audio in the files converted from Windows Media, which apparently exceeded Firefox’s playback capabilities on the Windows workstation, 但Mac Pro不行. 去图. 正如前面提到的, my first command line didn’t incorporate audio conversion, so by default FFmpeg converted the 96kHz WMA to 96kHz AAC. A quick command line change fixed the problem. We never did isolate the problem with IE at the customer site—since the client was migrating to Windows 10 and Edge, it decided to punt on IE support altogether.

的经验教训? Every standard sounds simple until you actually try to use it. 细节决定成败. Encode files for HTML5 playback targeting the lowest common denominator player. And never expect vendors to provide error messages that actually help you isolate the real problem.

This article originally ran in the July/August 2016 issue of 流媒体杂志 “细节决定成败.”