Đang tải... (xem toàn văn)
Lý thuyết lập trình ngôn ngữ html5 và css3 từ cơ bản đến nâng cao phần 4.
BËI 4 LËM VIỆC VỚI CçC THËNH PHẦN VIDEO, AUDIO, CANVAS CỦA HTML5 NHẮC LẠI BËI TRƯỚC ! Tổng quan về Javascript vˆ Jquery ! Lˆm việc với Javascript ! Lˆm việc với thư viện Jquery ! Học Javascript, jQuery với w3schools Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5 2 MỤC TIæU BËI HỌC ! Ch•n c‡c thˆnh phần video, audio vˆo trang ! iều khiển video với Javascript ! Lˆm quen với thˆnh phần canvas ! Sử dụng thˆnh phần cavas để thực hiện: ! Vẽ h“nh vˆ đường ! çp dụng mˆu vˆ cọ fradient ! Thực hiện tạo h“nh động Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5 3 THËNH PHẦN VIDEO, AUDIO TRONG HTML5 THËNH PHẦN VIDEO, AUDIO TRONG HTML5 ! Tại sao phải th•m video, ‰m thanh vˆo trang web? ! Tạo n•n trang web hấp dẫn ! Thu hœt sự truy cập của người duyệt với website ! Lˆ một c‡ch tiếp cận người d•ng ! Trước khi c— HTML5, lˆm c‡ch nˆo để ch•n video, ‰m thanh vˆo trang web? ! Phải sử dụng plug-ins của c‡c c™ng ty thứ 3 (third party) Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5 5 THËNH PHẦN VIDEO, AUDIO TRONG HTML5 ! HTML5 ch•n video, ‰m thanh vˆo trang web như thế nˆo? ! Cung cấp thˆnh phần HTML video chạy trong tr“nh duyệt ! T’ch hợp th•m với Javascript ! C‰u lệnh: ! Autoplay: thuộc t’nh quy định với tr“nh duyệt oạn video sẽ được chơi ngay khi trang được load Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5 6 <video src=video/BigBuck.oggautoplay></video> THËNH PHẦN VIDEO, AUDIO TRONG HTML5 ! HTML5 cung cấp th•m c‡c iều khiển cho video: ! Controls: cung cấp tr“nh iều khiển video tr•n c‡c tr“nh duyệt kh‡c nhau ! Poster: thuộc t’nh chỉ định cho tr“nh duyệt load h“nh ảnh ban đầu của video ! Width, height: thuộc t’nh chỉ định k’ch thước của video Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5 7 <video src=video/BigBuck.oggcontrols poster=poster854.jpg width=320height=180></video> THËNH PHẦN VIDEO, AUDIO TRONG HTML5 ! Audio: thuộc t’nh nˆy cho phŽp tắt tiếng của video, gi‡ trị 'muted' ! Loop: thuộc t’nh nˆy sẽ k’ch hoạt oạn video ph‡t lại ! Preload: cho phŽp tải oạn video ngay khi tải trang web, giảm thời gian tải video Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5 8 THËNH PHẦN VIDEO, AUDIO TRONG HTML5 ! Th•m c‡c thuộc t’nh để video được hỗ trợ tr•n nhiều tr“nh duyệt: ! C— nhiều định dạng, codec cho video nhưng kh™ng phải lœc nˆo cng hỗ trợ HTML5 video hiển thị tr•n c‡c tr“nh duyệt ! Định dạng Ogg: ¥ Định dạng theo chuẩn m‹ nguồn mở ¥ Được hỗ trợ bởi c‡c tr“nh duyệt Chrome, Firefox, Opera ! Định dạng MP4: ¥ Sử dụng codec H.264 vˆ ‰m thanh sử dụng codec AAC ¥ Được hỗ trợ bởi IE, Safari, iOS vˆ Android Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5 9 THËNH PHẦN VIDEO, AUDIO TRONG HTML5 ! Để oạn video ở cả 2 định dạng Ogg vˆ MP4 sẽ giœp hiển thị tốt tr•n c‡c tr“nh duyệt vˆ thiết bị ! Th•m thuộc t’nh type, codecs: m™ tả cấu trœc kiểu của file ogg, mp4 Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5 10 <video controls poster=poster320.jpg width=320 height=180> <source src=video/BigBuck.ogg> <source src=video/BigBuck.mp4> </video> <source src=video/BigBuck.ogg type=video/ogg; codecs=theora, vorbis> <source src=video/BigBuck.mp4 type=video/mp4; codecs=avc1.42E01E, mp4a.40.2 >