HTML5的audio/video标签内的文件格式的折中解决办法

前天说了Safari和Firefox分别支持了不同的音频/视频文件，因此如果偶们要在Safari和Firefox当中都能播放音频/视频文件怎么办 tuzji20
当然，现阶段其实最方便的解决办法是用flash——不仅Safari和Firefox都能播放，而且因为没有用HTML5的标签因此更老的浏览器都能顺利载入，只要你的机器内装有Flash 喝茶
但是，除此之外就没有办法了么 喝茶

其实，还有一种办法，上次说到可以在Mac上安装Theora的插件让Safari播放Firefox支持的ogg，但是暂时不清楚Windows下是否可行，因此个人认为这种方法并不是很好的解决办法，应该还有其他的方法

在搜索网络的时候，本人无意间发现了这么一种方法，至于效果，大家可以通过以下的音频文件来验证

这个文件，不论在Safari 4下还是在Firefox 3.5下都应该是能正常播放的，即使你的Safari没有安装Theora插件，但是——如果你同时使用这两个浏览器来加载这个页面，可能就会发现——啊咧？两个文件不一样 -_-?

是的，如果你使用Safari 4浏览这个页面，你应该能听到的是Kanon当中出现的水瀬名雪的闹钟语音；但是如果你使用Firefox 3.5浏览这个页面，你听到的应该是经典的Windows XP的开机提示音，外加一些奇奇怪怪的东西？（笑）

这样的东西是怎么做成的呢？其实答案非常简单，例如这个音频文件，通常偶们在写代码的时候可能绝大部分情况下是这样写：
< audio src="url" controls="true" />
或者类似的写法
但是这里偶则是采用了另外一种写法：
< audio controls>
< source src="url" />
< /audio>
这样的写法的好处是：source那一行其实可以写入很多个source，例如本文当中的那个音频文件本人实际上是这样写的：
< audio controls>
< source src="/audio/minase_nayuki_no_mezamashidokei.m4a" />
< source src="/audio/windows_xp_startup.ogg" />
Please use < a href="http://www.firefox.com/">Firefox 3.5+< /a> or < a href="http://www.apple.com/safari">Safari 4+< /a> in order to listen to this audio file.
< /audio>
就是通过像这样的方法，可以给这个audio标签添加多个源，这样如果第一个源无法解析，浏览器就会解析第二个；如果第一个能解析，则会跳过直到关闭这个标签；当然，偶想绝大部分人希望不论用户使用Firefox还是Safari都能听到同样的东西，这样的话偶们只需要将同一份文件分别压成aac文件和ogg文件，这样两个文件就是同样的内容了 喝茶

顺便冒一点小牢骚——昨天AIR鉴赏会完了之后，偶终于想起来为什么当初AIR剧场版偶看了一遍就扔掉了——那个东西的确做的很糟糕 baozib12

Author: 星野恵瑠

Mac user, Niji-Ota, Chinese, Now working in Japan at MAGES. Inc., Future's aim is that one day my name can be listed in Wikipedia

3 thoughts on “HTML5的audio/video标签内的文件格式的折中解决办法”

Leave a Reply to 喔喔兒 Cancel reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks: 

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

(;;) (:D) (!!!!) (……) (^o^;) (==) (OoO) (=v=o) more »Note: Commenter is allowed to use '@User+blank' to automatically notify your reply to other commenter. e.g, if ABC is one of commenter of this post, then write '@ABC '(exclude ') will automatically send your comment to ABC. Using '@all ' to notify all previous commenters. Be sure that the value of User should exactly match with commenter's name (case sensitive).