Skip to content

Instantly share code, notes, and snippets.

View fillano's full-sized avatar

Hsu Ping Feng fillano

35 followers · 12 following
View GitHub Profile
@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
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
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
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
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
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
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
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
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
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;