BậI LậM VIC VI CỗC THậNH PHN VIDEO, AUDIO, CANVAS CỦA HTML5 CuuDuongThanCong.com https://fb.com/tailieudientucntt NHẮC LẠI BËI TRƯỚC ! ! ! !   Tổng quan 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 - Lˆm việc với c‡c thˆnh phần video, audio, canvas HTML5 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 dng mu v c fradient ! Thực tạo h“nh động Slide - Lˆm việc với c‡c thˆnh phần video, audio, canvas HTML5 CuuDuongThanCong.com https://fb.com/tailieudientucntt THËNH PHẦN VIDEO, AUDIO TRONG HTML5 CuuDuongThanCong.com https://fb.com/tailieudientucntt THËNH PHẦN VIDEO, AUDIO TRONG HTML5 !   Tại phải th•m video, ‰m vˆo trang web? !   Tạo n•n trang web hấp dẫn !   Thu hœt truy cập người duyệt với website !   Lˆ c‡ch tiếp cận người d•ng !   Trước c— HTML5, lˆm c‡ch nˆo để ch•n video, ‰m vˆo trang web? !   Phải sử dụng plug-ins c‡c c™ng ty thứ (third party) Slide - Lˆm việc với c‡c thˆnh phần video, audio, canvas HTML5 CuuDuongThanCong.com https://fb.com/tailieudientucntt THËNH PHẦN VIDEO, AUDIO TRONG HTML5 !   HTML5 ch•n video, ‰m vˆo trang web nˆo? !   Cung cấp thˆnh phần HTML video chạy 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 chơi trang load Slide - Lˆm việc với c‡c thˆnh phần video, audio, canvas HTML5 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 !   Poster: thuộc t’nh định cho tr“nh duyệt load h“nh ảnh ban đầu video !   Width, height: thuộc t’nh định k’ch thước video Slide - Lˆm việc với c‡c thˆnh phần video, audio, canvas HTML5 CuuDuongThanCong.com https://fb.com/tailieudientucntt THËNH PHẦN VIDEO, AUDIO TRONG HTML5 !   Audio: thuộc t’nh nˆy cho phŽp tắt tiếng video, gi‡ trị 'muted' !   Loop: thuộc t’nh nˆy k’ch hoạt oạn video ph‡t lại !   Preload: cho phŽp tải oạn video tải trang web, giảm thời gian tải video Slide - Lˆm việc với c‡c thˆnh phần video, audio, canvas HTML5 CuuDuongThanCong.com https://fb.com/tailieudientucntt THËNH PHẦN VIDEO, AUDIO TRONG HTML5 !   Th•m c‡c thuộc t’nh để video hỗ trợ tr•n nhiều tr“nh duyệt: !   C— nhiều định dạng, codec cho video 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ợ c‡c tr“nh duyệt Chrome, Firefox, Opera !   Định dạng MP4: ¥  Sử dụng codec H.264 vˆ ‰m sử dụng codec AAC ¥  Được hỗ trợ IE, Safari, iOS vˆ Android Slide - Lˆm việc với c‡c thˆnh phần video, audio, canvas HTML5 CuuDuongThanCong.com https://fb.com/tailieudientucntt THËNH PHẦN VIDEO, AUDIO TRONG HTML5 !   Để oạn video định dạng Ogg vˆ MP4 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 file ogg, mp4 Slide - Lˆm việc với c‡c thˆnh phần video, audio, canvas HTML5 CuuDuongThanCong.com 10 https://fb.com/tailieudientucntt CANVAS !   Khởi tạo: !   Lệnh canvas: 300){ x = -50; y=Math.random()*300; setInterval(function () { draw(); }, 36); } img.src = ; } } } } Slide - Lˆm việc với c‡c thˆnh phần video, audio, canvas HTML5 CuuDuongThanCong.com 29 https://fb.com/tailieudientucntt TỔNG KẾT !   Khi ch•n video, ‰m vˆo trang web n•n khai b‡o c‡c định dạng ogg, mp4, mp3 để c‡c tr“nh duyệt phổ biến hỗ trợ tốt !   Khi vẽ c‡c h“nh với Canvas, iều cần chœ !: !   Tọa độ vẽ !   K’ch thước !   Hˆm t’nh đặc biệt (chu vi h“nh tr˜n) !   Sử dụng kết hợp Canvas với Javascript để h“nh ảnh tốt Slide - Lˆm việc với c‡c thˆnh phần video, audio, canvas HTML5 CuuDuongThanCong.com 30 https://fb.com/tailieudientucntt