1. BI 4 LM VIC VI CC THNH PHN VIDEO, AUDIO, CANVAS CA HTML5

2. NHC LI BI TRC Tng quan v Javascript v Jquery Lm vic vi Javascript Lm vic vi th vin Jquery Hc Javascript, jQuery vi w3schools Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 2 3. MC TIU BI HC Chn cc thnh phn video, audio vo trang iu khin video vi Javascript Lm quen vi thnh phn canvas S dng thnh phn cavas thc hin: V hnh v ng p dng mu v c fradient Thc hin to hnh ng Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 3 4. THNH PHN VIDEO, AUDIO TRONG HTML5 5. THNH PHN VIDEO, AUDIO TRONG HTML5 Ti sao phi thm video, m thanh vo trang web? To nn trang web hp dn Thu ht s truy cp ca ngi duyt vi website L mt cch tip cn ngi dng Trc khi c HTML5, lm cch no chn video, m thanh vo trang web? Phi s dng plug-ins ca cc cng ty th 3 (third party) Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 5 6. THNH PHN VIDEO, AUDIO TRONG HTML5 HTML5 chn video, m thanh vo trang web nh th no? Cung cp thnh phn HTML video chy trong trnh duyt Tch hp thm vi Javascript Cu lnh: Autoplay: thuc tnh quy nh vi trnh duyt on video s c chi ngay khi trang c load Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 6 7. THNH PHN VIDEO, AUDIO TRONG HTML5 HTML5 cung cp thm cc iu khin cho video: Controls: cung cp trnh iu khin video trn cc trnh duyt khc nhau Poster: thuc tnh ch nh cho trnh duyt load hnh nh ban u ca video Width, height: thuc tnh ch nh kch thc ca video Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 7 8. THNH PHN VIDEO, AUDIO TRONG HTML5 Audio: thuc tnh ny cho php tt ting ca video, gi tr 'muted' Loop: thuc tnh ny s kch hot on video pht li Preload: cho php ti on video ngay khi ti trang web, gim thi gian ti video Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 8 9. THNH PHN VIDEO, AUDIO TRONG HTML5 Thm cc thuc tnh video c h tr trn nhiu trnh duyt: C nhiu nh dng, codec cho video nhng khng phi lc no cng h tr HTML5 video hin th trn cc trnh duyt nh dng Ogg: nh dng theo chun m ngun m c h tr bi cc trnh duyt Chrome, Firefox, Opera nh dng MP4: S dng codec H.264 v m thanh s dng codec AAC c h tr bi IE, Safari, iOS v Android Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 9 10. THNH PHN VIDEO, AUDIO TRONG HTML5 on video c 2 nh dng Ogg v MP4 s gip hin th tt trn cc trnh duyt v thit b Thm thuc tnh type, codecs: m t cu trc kiu ca file ogg, mp4 Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 10 11. THNH PHN VIDEO, AUDIO TRONG HTML5 iu khin video vi Javascript: Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 11 Tontsdngjavascriptiukhinvideo 12. THNH PHN VIDEO, AUDIO TRONG HTML5 Khi to hm trong javascript thc hin cc s kin: Play, Pause, Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 12 13. THNH PHN VIDEO, AUDIO TRONG HTML5 Chn m thanh vo trang web s dng HTML5: Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 13 14. CANVAS 15. CANVAS Canvas l hm API v 2 chiu ca HTML5 Hnh v s dng Canvas: Cp nht c trong thi gian thc Lu li di nh dng .png S dng cc thnh phn Canvas xc nh b mt v, nhng phi xc nh hng v v dng kt qu, hnh dng, mu sc vi Javascript Canvas lun lm vic cng vi javascript Cc bc lm vic vi Canvas: nh ngha thnh phn canvas trong HTML Tham chiu bi cnh v cho cc phn t nh mt bin trong Javascript Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 15 16. CANVAS Khi to: Lnh canvas: Kt hp v vi Javascript: Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 16 var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); 17. CANVAS i tng getContext(2d) l i tng HTML5 cha cc phng thc v ng path, hnh hp, hnh trn, character, hnh nh, v.v. nh ngha kiu mu t l mu nh ngha v mt hnh ch nht kch thc 150x75, bt u t gc trn bn tri (0,0) Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 17 var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000; ctx.fillRect(0,0,150,75); 18. CANVAS u im ca thnh phn Canvas: Cho php to graphic, hnh ng (animation), gradient, cc i tng ha khc bng m c cc trnh duyt ph bin h tr Kh nng mnh m: lm game, animation, chart, graph, vector, Khng phi s dng thm plugin Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 18 19. CANVAS V ng path: ng path: to nn cc hnh dng c s Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 19 path Hnh ch nht ng thng Hnh trn ng cong 20. CANVAS V hnh ch nht: X,y: ta v hnh Width, height: kch thc hnh Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 20 .fillStyle() .fillRect(x,y, width, height) .strokeStyle() .strokeRect(x, y, width, height) Tax,ytrnmnhnh 21. CANVAS V hnh ch nht: Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 21 function setup() { var canvas = document.getElementById('lessonCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.strokeStyle = 'rgb(255, 0, 0)'; ctx.strokeRect(0.5, 0.5, 100, 100);} } 22. CANVAS V ng thng: Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 22 ctx.strokeRect(0, 0, 300, 300); ctx.moveTo(20, 20); ctx.lineTo(100, 100); ctx.lineTo(80, 200); ctx.lineTo(200, 80); ctx.lineTo(200, 200); ctx.lineTo(280, 280); ctx.stroke(); moveTo(x,y) Toramtngpathphvitaxcnh lineTo(x,y) Thmimpointmi,ktniviimtrcbngng thng 23. CANVAS V ng trn: Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 23 Arc(x,y,bnknh,2r) 24. CANVAS V ng cong: Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 24 ctx.fillStyle = 'rgb(0,173,104)'; ctx.moveTo(145, 150); ctx.quadraticCurveTo(120, 200, 170, 280); ctx.lineTo(190, 280); ctx.quadraticCurveTo(125, 190, 155, 150); ctx.fill(); var pt1 = { x: 155, y: 145 }; var pt2 = { x: 93, y: 106 }; var cp1 = { x: 111, y: 154 }; var cp2 = { x: 4, y: 131 }; quadraUcCurveTo(cpx,cpy,x,y) bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 25. CANVAS V text: Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 25 ctx.font = "bold 1.8em sans-serif"; ctx.fillText(text,x,y,maxWidth); ctx.font="bold1.8em sans-serif"; ctx.llText('HELLOMY NAMEIS',12,40); 26. CANVAS T mu gradient: Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 26 var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var grd=ctx.createLinearGradient(0,0,170,0); grd.addColorStop(0,"black"); grd.addColorStop(1,"white"); ctx.fillStyle=grd; ctx.fillRect(20,20,150,100); Phngthcxcnhmuscvvtrca itnggradient Thngcsdngcng createLinearGradient()v createRadialGradient() 27. CANVAS Chn thm hnh nh: Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 27 context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); Thams Dint Img Chnhthnhphnhnhnhsdng Sx Tychn.Taxnitabtu Sy Tychn.Taynitabtu Swidth Tychn.Chiurngcahnhnhctbt Sheight Tychn.Chiucaocahnhnhctbt X,y Tax,ythnhnh Width,height Tychn.Chiudi,rngcahnhnhsdng 28. CANVAS S dng bin i: S dng kt hp vi khung hnh v s to ra hnh nh p hn 3 loi bin i: Scaling Rotating Translating S dng kt hp vi hm: save, restore Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 28 ctx.fillRect(30, 120, 40, 40); ctx.translate(0, 20); ctx.fillRect(80, 120, 40, 40); 29. CANVAS V hnh chuyn ng lp (loop): Kt hp s dng vi hm javascript (setInterval), s to ra c nhng chuyn ng lp Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 29 function draw() { drawBackground(); ctx.drawImage(img, x, y); x += 3; if(x > 300){ x = -50; y=Math.random()*300; } } function setup() { var canvas = document.getElementById('lessonCanvas'); if (canvas.getContext) { ctx = canvas.getContext('2d'); img = new Image(); img.onload = function(){ setInterval(function () { draw(); }, 36); } img.src = ; } } 30. TNG KT Khi chn video, m thanh vo trang web nn khai bo cc nh dng .ogg, .mp4, .mp3 c cc trnh duyt ph bin h tr tt nht Khi v cc hnh c bn vi Canvas, iu cn ch : Ta v Kch thc Hm tnh c bit (chu vi hnh trn) S dng kt hp Canvas vi Javascript c hnh nh tt nht Slide 4 - Lm vic vi cc thnh phn video, audio, canvas ca HTML5 30