Lý thuyết lập trình ngôn ngữ html5 và css3 phần 4

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.ogg󲣼󲗍autoplay></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.ogg󲣼󲗍󲗍controls poster=󲣻poster854.jpg󲣼󲗍 width=󲣻320󲣼󲗍height=󲣻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 c󲛵ng 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󲤀󲗍󲣼 >