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

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