标签归档：HTML5

Program、微小应用程序

Caf播放器 (caf player v1.0)

2条评论

v2.0测试版 (20151108)
现在改成用 html5实现了
=> 测试地址

支持情况：

+---------------------+-----+-----+-----+-----+
| Browser             | Ogg | MP3 | AAC | Wav |
+---------------------+-----+-----+-----+-----+
| Internet Explorer 9 | No  | Yes | Yes | No  |
| Firefox 5           | Yes | No  | No  | Yes |
| Chrome 12           | Yes | Yes | Yes | Yes |
| Safari 5            | No  | Yes | Yes | Yes |
| Opera 11.5          | Yes | No  | No  | Yes |
+---------------------+-----+-----+-----+-----+

———-
现在貌似除了apple自家的QuickTime，其他播放器对caf格式的音频文件都不怎么支持，偏偏QuickTime又很龌蹉，连个播放列表都没，要听多个caf音乐的时候简直是个折磨。

google了一下无果，决定折腾一个出来凑合用用。

这个是用HTML5的File API配合firefox的QuickTime插件实现的，使用方法很简单：

1. 打开 http://www.ceilwoo.com/lab/caf_player/caf_player.html   (只支持Firefox, 其他浏览器有空再说)

2. 然后把你本地的caf音频文件拖拽到播放器右上角那个dropbox区域(支持多选)，松开后就会在下方插入一个所拖放文件的列表，点击其中一个音乐就可以播放了。

3. 点音乐右边的X可以把该音乐从播放列表删除

 

使用条件：

1.Firefox

2.安装了QuickTime

 

实现原理：

其实是现在盛行的html5拖拽上传功能的一部分，拖放的时候可以用window.URL.createObjectURL()获取到文件的地址，然后赋值给页面上的QuickTime embed播放。

mozilla的doc有详细介绍这种拖拽文件的方法。

另外获取到的文件地址是 moz-filedata:38c69692-XXX 这样的一种的格式，可以直接当url来使用(譬如是图片的话把img的src改成这个就可以在页面显示出来的)

估计是出于安全因素而不直接显示 “file:///c:/” 这样的明文路径。

PS: 虽然说是caf play，其实wav mp3等都是可以拖进去放的。

PS: 随机播放、顺序播放、播放列表等这些花哨的功能等寡人哪天心情好再加上去，啊哈哈哈

Program

HTML 5 备忘录

留下评论

由Techking整理的html5 cheatsheet(我翻译成备忘录了)，list和介绍了html5中所有的标签、事件、属性以及desktop & mobile浏览器的支持情况，《CSS权威指南》的浓缩版。

顺手纠正一下，Internet上好多介绍HTML5很炫很酷的动画效果的东西，其实那些绝大多数是CSS3和Javascript的事情，顶多就跟<canvas>有点关系，HTML还没发展到干这些事情的程度。

最受益于HTML5的是其实开发人员。相信投奔HTML5行列的人很快就会迷上新增的各种标签 header footer section detail…etc。下边截图是nekoq.com重构后的代码。

在HTML5中div的使用率降低了很多，现在可以用header去表示一个页面或是一个模块的头部，用article表示一篇文章，相比在过去的很长的一段时间里你要重复写着很多<div id=”xxx”>这样的东西，层次稍微复杂点的代码块末尾就有一堆的</div>、</tr>、</table>，多人协作开发时还经常遇上少标签，没对齐各种烦人问题。而多元化的标签能很好的降低这些烦恼，so..不要犹豫啦，赶快加入HTML5行列吧。

另外悲剧的IE直到IE9才开始支持部分新增的标签，要兼容过去的版本可以在header加上HTML5 IE enabling script:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->