Hsu Ping Feng fillano

fillano / 顯示audio物件資訊

Created October 18, 2010 15:04

利用audio標籤加上controls屬性來控制，然後檢視相關屬性在播放中的變化。

	<!DOCTYPE html>
	<html lang="zh-TW">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8">
	</head>
	<body>
	<audio src="bwv4_overture.mp3" controls id="player"></audio>
	<div id="panel"></div>
	</body>
	</html>

fillano / html5 video tag test

Created October 19, 2010 15:55

play a m4v or ogg video in different browser and see the status of video object

	<!DOCTYPE html>
	<html lang="zh-TW">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8">
	</head>
	<body>
	<video id="player" src="crockonjs-1.m4v" controls poster="vlcsnap-00001.png"></video>
	<!--<video id="player" src="Apollo_15_liftoff_from_inside_LM.ogg" controls></video>-->
	<div id="panel"></panel>
	</body>

fillano / canvas 2d detect and simple test

Created October 20, 2010 15:24

偵測瀏覽器對於canvas 2d規格的支援程度，並且畫一個小叉叉做測試。

	<!DOCTYPE html>
	<html lang="zh-TW">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8">
	<style>
	div {
	background: #AACCEE;
	border: solid 1px #336699;
	margin: 10px;
	padding: 5px;

fillano / html5 canvas pen draw

Created October 21, 2010 15:33

做出可以用滑鼠隨意塗鴉的效果

	<!DOCTYPE html>
	<html lang="zh-TW">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8">
	<style>
	div {
	background: #AACCEE;
	border: solid 1px #336699;
	margin: 10px;
	padding: 5px;

fillano / html5 canvas draw with rotate

Created October 21, 2010 15:36

示範繪圖加上旋轉的效果

	<!DOCTYPE html>
	<html lang="zh-TW">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8">
	<style>
	div {
	background: #AACCEE;
	border: solid 1px #336699;
	margin: 10px;
	padding: 5px;

fillano / html5 canvas text

Created October 21, 2010 15:37

簡單的文字繪製示範

	<!DOCTYPE html>
	<html lang="zh-TW">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8">
	<style>
	div {
	background: #AACCEE;
	border: solid 1px #336699;
	margin: 10px;
	padding: 5px;

fillano / html drawimage test with drag&drop

Created October 21, 2010 15:39

簡單的影像繪製測試

	<!DOCTYPE html>
	<html lang="zh-TW">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8">
	<style>
	div {
	background: #AACCEE;
	border: solid 1px #336699;
	margin: 10px;
	padding: 5px;

fillano / canvas 3d webgl interface detect

Created October 22, 2010 12:35

簡單地檢測webgl支援以及瀏覽器對WebGL Interface的支援程度

	<!DOCTYPE html>
	<html lang="zh-TW">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8">
	<style>
	div {
	background: #AACCEE;
	border: solid 1px #336699;
	margin: 10px;
	padding: 5px;

fillano / html5 form validation

Created October 25, 2010 16:50

簡單的表單驗證測試，不過只能在Opera瀏覽器執行

	<!DOCTYPE html>
	<html lang="zh-TW">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8">
	<style>
	div {
	background:#99CCFF;
	border:solid 1px #336699;
	margin:10px;
	padding:5px;

fillano / simple web sql db test

Created November 4, 2010 00:26

create/drop table insert/select data etc...

	<!DOCTYPE html>
	<html lang="zh-TW">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8">
	<style>
	div {
	border: solid 2px #336699;
	margin: 10px;
	padding: 5px;
	border-radius: 5px;