Mais conteúdo relacionado
Semelhante a HTML5 Basic (20)
HTML5 Basic
- 3. HTML5 Basic http://MobileDev.TW
1. 簡介
HTML4.01 1999.12.24
XHTML1.0 2002.08.01
XHTML1.1 2008.07.29
XHTML2.0 ?
W3C-XHTML2.0
WHATWG-Web Forms Applicaions
HTML5 –由W3C與WHATWG共同制定(2006起)
3
- 6. HTML5 Basic http://MobileDev.TW
3.測試環境
1. 主機+虛擬機
• Firefox
• Chrome
• Opera
• Safari
• iOS Simulator
• MAC + iOS SDK
• Android Emulator
• Android SDK
• /tools/android指令開啓
2. 主機+實機
• 無線網路
• 主機Web Server
• iPhone實機
• iOS Safari
• Android實機
• Android Browser
3. Editor
• Aptana
• Sublime Text
6
- 13. HTML5 Basic http://MobileDev.TW
5-1.影片播放
語法:
video src=movie.mp4 width=320
height=240 controls=controls
萬一不支援想顯示的訊息放這裡
/video
Source也可以獨立多寫幾個,萬一User的Browser讀不出來,可以Load另
外一個
video width=320 height=240 controls=controls
source src=movie.ogg type=video/ogg
source src=movie.mp4 type=video/mp4
/video
13
- 24. HTML5 Basic http://MobileDev.TW
5-4.加上播放進度與音量控制項
• 在HTML中,增加進度與音量顯示區,以及兩顆按鈕(-/+)
• 開始播放後,監聽timeupdate事件
• video.currentTime:目前播放進度
• video.duration:全長
• Math.floor()取向下整數
• 按下+按鈕
• 透過video.volume取得目前音量 (介於0~1)
• 若音量已經為1,不動作
• 若音量大於0.9,設定為1
• 其他狀況,音量加0.1
• 按下-按鈕
• 若音量已經為0,不動作
• 若音量小於0.1,設定為0
• 其他狀況,音量減0.1
• 用toFixed(2)將數值輸出為小數點後有2位數
24
- 28. HTML5 Basic http://MobileDev.TW
6-1.繪圖-矩形
!DOCTYPE HTML
html
head/head
body
canvas id=myCanvas width=200 height=100
style=border:1px solid #c3c3c3;/canvas
script
var c=document.getElementById(myCanvas);
//使用id來找到Canvas元件
var cxt=c.getContext(2d);
//2d是HTML5內建Object,有許多可使用的方法如畫路徑,箱子,圓圈,文字,影像等
cxt.fillStyle=#00FF00;
//塗成綠色
cxt.fillRect(0,0,100,50);
//在(0,0)~(100,50)畫一個矩形 從(0,0)延伸畫一個寬100高50的矩形
/script
/body/html
28
- 35. HTML5 Basic http://MobileDev.TW
6-4.放圖片
放圖片進去
var img=new Image();
img.src=picture.png;
cxt.drawImage(img,0,0);
//決定圖片從哪一個點開始放
cxt.drawImage(img,0,0,80,80);
前兩個參數決定開始放的點,後兩個參數可以縮放圖片大小,
後兩個可省略
cxt.drawImage(img,0,0,170,343,0,0,100,100);
前面四個參數決定要剪下圖片的哪一個部分,接著兩個參數決
定圖片從哪一個點開始放,最後兩個參數決定縮放
35
- 61. HTML5 Basic http://MobileDev.TW
Web Server 設定步驟
• 在Web Server上設置.htaccess,加上這一行:
• AddType text/cache-manifest .manifest
• 將Apache上的httpd.conf,修改:
Directory /
Options FollowSymLinks
AllowOverride All
/Directory
61
- 63. HTML5 Basic http://MobileDev.TW
如何更新快取
• 直接更新manifest檔案
• 用JavaScript
applicationCache.update()
• 可監聽以下事件瞭解現況
• checking:正在檢查更新或準備第一次下載manifest
• noupdate:manifest沒有變動時
• downloading:正在下載manifest列出的檔案時
• progress:相關檔案都下載好時
• updateready:更新快取完畢,準備替換成最新的快取之前
63
- 65. HTML5 Basic http://MobileDev.TW
Web Worker
• 多執行緒進行運算
• 無法共享主執行緒變數
• 無法直接變更window
• 無法直接變更document
• 傳送訊息回主執行緒
Main Thread
New Thread
make new thread passing messagespassing messages
65
- 66. HTML5 Basic http://MobileDev.TW
Web Worker
• 避免瀏覽器當掉,停住於某一個龐雜的計算script
• 使用Web Worker來計算2~1000000是否為質數
• 建立一個新的Web Worker來跑一隻JavaScript
• 該檔案計算2~1000000是否為質數
• 過程中需將進度回傳給主執行緒
• 最後將結果也送回主執行緒
66