&&&&&&&&&&&&&&&&&&
posts - 430,comments - 44,trackbacks - 2
&一般提供ogg和mp3格式，就可以支持所有主流浏览器了。
&!DOCTYPE HTML&&html&&head&
&title&测试各种浏览器支持的音乐格式&/title&&/head&&body&
&br /&&br /&&br /& 播放《庄心妍-一万个舍不得》：&br /&&br /&&br /&
&audio controls="controls"&
&source src="song.ogg" type="audio/ogg"&
&source src="song.m4a" type="audio/mpeg"&
&source src="song.mp3" type="audio/mpeg"&
你的浏览器不支持html5的audio标签
&br /&&br /&&br /&播放《曲婉婷-我的歌声里》&br /&&br /&&br /&
&audio controls="controls"&
&source src="song2.ogg" type="audio/ogg"&
&source src="song2.mp3" type="audio/mpeg"&
你的浏览器不支持html5的audio标签
&br /&&br /&&br /&&/body&&/html&
&有朋友说苹果safari支持m4a格式，在iphone上测试不支持，支持播放mp3格式的.
进过测试，PC浏览器可以同时播放两个音乐，平板和手机只能播放一个。
音频格式知识普及：
Ogg：全称应该是OGGVobis(oggVorbis)是一种新的音频压缩格式，类似于MP3等的音乐格式。Ogg是完全免费、开放和没有专利限制的。OggVorbis文件的扩展名是.OGG。Ogg文件格式可以不断地进行大小和音质的改良，而不影响旧有的编码器或播放器。
MP3：是一种音频压缩技术，其全称是动态影像专家压缩标准音频层面3（Moving Picture Experts Group Audio Layer III），简称为MP3。它被设计用来大幅度地降低音频数据量。利用 MPEG Audio Layer 3 的技术，将音乐以1:10 甚至 1:12 的压缩率，压缩成容量较小的文件，而对于大多数用户来说重放的音质与最初的不压缩音频相比没有明显的下降。
WAV：为微软公司(Microsoft)开发的一种声音文件格式，它符合RIFF(Resource Interchange File Format)文件规范，用于保存Windows平台的音频信息资源，被Windows平台及其应用程序所广泛支持，该格式也支持MSADPCM，CCITT A LAW等多种压缩运算法，支持多种音频数字，取样频率和声道，标准格式化的WAV文件和CD格式一样，也是44.1K的取样频率，16位量化数字，因此在声音文件质量和CD相差无几！
各种关联：wav格式音质最好，但是文件体积较大。mp3压缩率较高，普及率高，音质相比wav要差。ogg与mp3在相同位速率(Bit Rate)编码的情况下，ogg体积更小，并且ogg是免费的不用交专利费（这点国人很中意）。
阅读(...) 评论()更多频道内容在这里查看
爱奇艺用户将能永久保存播放记录
过滤短视频
暂无长视频（电视剧、纪录片、动漫、综艺、电影）播放记录，
使用您的微博帐号登录，即刻尊享微博用户专属服务。
使用您的QQ帐号登录，即刻尊享QQ用户专属服务。
使用您的人人帐号登录，即刻尊享人人用户专属服务。
按住视频可进行拖动
把视频贴到Blog或BBS
当前浏览器仅支持手动复制代码
视频地址：
flash地址：
html代码：
通用代码：
通用代码可同时支持电脑和移动设备的分享播放
收藏成功，可进入查看所有收藏列表
方式1：用手机看
用爱奇艺APP或微信扫一扫，在手机上继续观看：
《我的世界》0.12.0饥饿游戏服务器
方式2：一键下载至手机
限爱奇艺安卓6.0以上版本
使用微信扫一扫，扫描左侧二维码，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/udn
下载安装包到本机：&&
设备搜寻中...
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
连接失败！
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
部安卓（Android）设备，请点击进行选择
请您在手机端下载爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/udn
下载安装包到本机：&&
爱奇艺云推送
请您在手机端登录爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
180秒后更新
打开爱奇艺移动APP，点击“我的-扫一扫”，扫描左侧二维码进行登录
没有安装爱奇艺视频最新客户端？
爸爸去哪儿2游戏 立即参与
《我的世界》0.12.0饥饿游戏服务器
播放量数据：
50,422人已订阅
你可能还想订阅他们：
{{#needAdBadge}} 广告{{/needAdBadge}}
&正在加载...
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制
安装爱奇艺视频客户端，
马上开始为您下载本片
5秒后自动消失
&li data-elem="tabtitle" data-seq="{{seq}}"& &a href="javascript:void(0);"& &span>{{start}}-{{end}}&/span& &/a& &/li&
&li data-downloadSelect-elem="item" data-downloadSelect-selected="false" data-downloadSelect-tvid="{{tvid}}"& &a href="javascript:void(0);"&{{pd}}&/a&
选择您要下载的《
色情低俗内容
血腥暴力内容
广告或欺诈内容
侵犯了我的权力
还可以输入
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制您所在的位置：
&瑞影浏览器(瑞影浏览器官方下载)V3.3.0.0官方版
点击查看大图
大小：1.03 MB
语言：简体中文
授权：免费软件
开发商：未知
瑞影浏览器软件介绍
IE内核的多标签网页浏览器。除了目前主流浏览器具有的功能外，它还首创了“封杀”和“视频搜索”功能。你可以通过设置，将网页上不想看到的词汇过滤或是换成你想要的文字。“视频搜索”功能则提供了方便快捷的搜索电视剧，电影，动画等视频信息的功能。
瑞影浏览器同类推荐
瑞影浏览器下载地址
24913次下载
57581次下载
277941次下载
12156次下载
259365次下载
24913次下载
149257次下载
12816次下载
54633次下载
221558次下载
5904169次下载
1509331次下载
398179次下载
317954次下载
277941次下载
263948次下载
259365次下载
223606次下载
221558次下载
199302次下载
热门关键字中国领先的IT技术网站
51CTO旗下网站
优秀HTML 5网站范例：从“饥饿游戏浏览器”谈用户体验
继影片《饥饿游戏》获得票房成功后，《饥饿游戏2：火星燎原》也于2012年宣布开拍，将在今年的11月22日登陆全球各大院线。值此之际，微软携手美国狮门影业公司和 RED Interactive Agency 一起为影迷打造了一个基于 HTML5 现代网页规范开发的沉浸式体验网站――饥饿游戏浏览器（The Hunger Games Explorer），地址为 . 在这里，全世界的饥饿游戏迷们可以获得影片上映前的一切资讯，包括狮门影业官方放出的海报、预告片等等，同时也可以参与到全球社交媒体关于饥饿游戏的讨论中来。
作者：佘华煜来源：博客园| 09:45
今天，消费者们可以与我一同看看，一个优秀的 HTML5 站点能给我们大家带来怎样的新体验，而开发者们也可以参考这个网站所使用的一些 HTML5 特性，去开发出您自己的优秀 HTML5 站点。
从功能上看，该网站为所有的影迷们提供了一站式的影讯资源平台，不仅可以看到狮门公司所发布的官方讯息，更可以实时查看到来自全球的社交媒体上关于饥饿游戏的讨论。所有的内容，包括图像、视频和文字，都是通过一个个的方块区域组织到一起的，内容也是直观地呈现在了不同的方块里面，并且很多区块中的内容是动态的，给网站增添了视觉上的活力。而且如果您有触摸屏的话，不难发现，这个站点是支持多点触控的，用双指可以进行自然的缩放，来调整页面内容的呈现，很好地支持直接用手指去与整个网站进行交互。
这些社交媒体的数据抓取和整合自全球热门的社交媒体网站，例如 Facebook、Twitter、YouTube、Pinterest 和 Tumblr. 同时这个饥饿游戏浏览器网站也支持通过 Facebook 和 Twitter 账号登录，登录后用户可以创建自己的页面来组织你所关注的资源和内容，也可以去&赞&别人发布的内容，因此，这个站点本身通过对第三方社交媒体网络的整合，为用户轻松提供了一个新的影迷专用社交平台。这样的做法是值得推荐给开发者们的。
在UI设计方面，网站整体呈现出一种现代感，借助 HTML5 的一些功能，网站可以使用自定义的字体，并且可以设计出与影片主题契合的配色风格和界面元素。在我们点击某一内容方块时，可以看见该方块放大且周遭方块缩小重排的动画效果，这样会让内容的切换不显得过于突兀。用户在刚打开这个网站的同时，也可以看见方块向中间堆叠铺陈的效果，虽然很快，但能给人舒适的感受。在功能上，用户还可以对某一关键字进行检索，也可以进行筛选。该网站也采用了瀑布流的方式，网站不设底边，一直往下滚动会看见越来越多的来自社交媒体网站的内容被整合进来，并得以呈现。
横跨不同设备并提供一致用户体验也是该网站的一个亮点，因为不论是从 PC 端的 IE10 ，还是智能手机或平板的支持 HTML5 的浏览器访问该站点，都可以看到一致的内容与风格，只不过，里面的方块大小和排列方式会根据用户的屏幕分辨率来自动调整。对于这样的自适应效果，我们也可以通过 PC 端的 IE10 浏览器看到，具体做法是改变窗口的尺寸。
幕后的技术
网站的瀑布式内容呈现方式，借助了 JavaScript 将大大小小的信息方块无缝地组织到一起。这是一个典型的网格布局，只不过它使用的不是传统的网格布局技术，而是使用了 JS 将每一块内容放到合适的位置，并且使用 3D CSS 变换来实现块移动和旋转时候的效果。
而对于触摸的支持，它利用了 Microsoft Pointers Model，因此可以做到使用一个 API 就可以同时管理鼠标和手指触摸这两种用户输入。
对于 3D 翻转动画，网站运用了使用 requestAnimationFrame API 优化的 CSS3 变换，这样能确保动画效果在不同的浏览器和设备上都一样流畅。requestAnimationFrame 技术能够在不牺牲运算能力的同时进一步提高响应度，响应度的提高也是让用户感觉到动画流畅的一个关键。
如果您想查看这些技术范例的代码，可以移步此处：&
创作用户喜爱的网站
如今的互联网不再单以信息内容为第一要务，用户对参与和交互的要求已经越来越高，因为 Web 2.0 是一个强调用户为中心、用户创造内容和参与交互的一个时代。因此，用户体验是越来越重要的一个环节。要做好用户体验，并且兼顾这一需求在未来的发展，旧有的一些技术似乎已不再能很好地支撑用户体验的今天和明天。虽然现在 Flash 等插件在网页中有很多运用，但是我们已经通过这些优秀的 HTML5 网站看到了无插件网页带来的一些优势，例如高性能、省电与浑然天成的视觉效果等。对于熟知旧有技术的开发者而言，做出改变虽然看似有些困难，但是我们应当看到现代网页技术的发展给我们带来的喜悦，以及能够给用户带来的惊喜与价值。我们值得为用户做出改变，也同样值得为网站用户体验及网页技术的未来做出改变。
微软通过参与研究和推动 HTML5 等现代网页技术规范，改进了 IE 浏览器对 HTML5 等现代网页技术的支持，也正不断为开发者提供越来越多的指引和资源。我们看到，已经有越来越多的开发者步入到 HTML5 开发的行列中来，也期待在不久的将来，能有更多的网站构建于新的技术之上！
如果您需要更多了解HTML5 等现代网页技术，可以前往&&查看更多技术示例及代码。前不久，微软也新推出了&&网站，帮助开发者更轻松地评估现有在线网站，当然，您也可以选择下载一个用于本地的 modern.IE 程序，用来简化您的开发测试工作。试试身手吧！
原文链接：
【编辑推荐】
【责任编辑： TEL：（010）】
大家都在看猜你喜欢
原创外电外电头条专题
24H热文一周话题本月最赞
讲师：1人学习过
讲师：35人学习过
讲师：0人学习过
精选博文论坛热帖下载排行
Java是当前最流行的程序设计语言之一。本书以Java最新版本Java SE5为基础，涵盖了Java SE5最新特性，由浅入深地介绍了Java SE5的主要内容。...
订阅51CTO邮刊