Đang tải... (xem toàn văn)
Những khái niệm về HTML 5,Giáo trình HTML5 css3,HTML căn bản,giáo trình html cơ bản,định dạng HTML,ngôn ngữ HTML, HTML, CSS, HTML và CSS, JAVASCRIPT, JAVA, cơ bản về HTML, kiến thức cơ bản về HTML, lập trình tin học, công nghệ thông tin,Làm việc với thành phần mở rộng của CSS3,Làm việc với CSS3, Giáo trình HTML5 và CSS3 Làm việc với các thành phần VIDEO, AUDIO, CANVAS của HTML5
BÀI 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 Javascript 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 thành phần video, audio, canvas HTML5 MỤC TIÊU BÀI HỌC ! ! ! ! Chèn 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 ñường ! Áp dụng màu cọ fradient ! Thực tạo hình ñộng Slide - Làm việc với thành phần video, audio, canvas HTML5 THÀNH PHẦN VIDEO, AUDIO TRONG HTML5 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 ñể chèn video, âm vào trang web? ! Phải sử dụng plug-ins công ty thứ (third party) Slide - Làm việc với thành phần video, audio, canvas HTML5 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 ñược chơi trang ñược load Slide - Làm việc với thành phần video, audio, canvas HTML5 THÀNH PHẦN VIDEO, AUDIO TRONG HTML5 ! HTML5 cung cấp thêm iều khiển cho video: ! Controls: cung cấp trình iều khiển video 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 thành phần video, audio, canvas HTML5 THÀNH PHẦN VIDEO, AUDIO TRONG HTML5 ! Audio: thuộc tính cho phép tắt tiếng video, giá trị 'muted' ! Loop: thuộc tính 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 thành phần video, audio, canvas HTML5 THÀNH PHẦN VIDEO, AUDIO TRONG HTML5 ! Thêm thuộc tính ñể video ñược hỗ trợ nhiều trình duyệt: ! Có nhiều ñịnh dạng, codec cho video lúc c ng hỗ trợ HTML5 video hiển thị trình duyệt ! ðịnh dạng Ogg: • ðịnh dạng theo chuẩn mã nguồn mở • ðược hỗ trợ trình duyệt Chrome, Firefox, Opera ! ðịnh dạng MP4: • Sử dụng codec H.264 âm sử dụng codec AAC • ðược hỗ trợ IE, Safari, iOS Android Slide - Làm việc với thành phần video, audio, canvas HTML5 THÀNH PHẦN VIDEO, AUDIO TRONG HTML5 ! ðể oạn video ñịnh dạng Ogg MP4 giúp hiển thị tốt trình duyệt 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 thành phần video, audio, canvas HTML5 10 CANVAS ! Khởi tạo: ! Lệnh canvas: phần video, audio, canvas HTML5 } } 29 TỔNG KẾT ! Khi chèn video, âm vào trang web nên khai báo ñịnh dạng ogg, mp4, mp3 ñể ñược trình duyệt phổ biến hỗ trợ tốt ! Khi vẽ hình với Canvas, iều cần ý: ! 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 ñể ñược hình ảnh tốt Slide - Làm việc với thành phần video, audio, canvas HTML5 30 [...]... Slide 4 - Làm việc với các thành phần video, audio, canvas của HTML5 12 THÀNH PHẦN VIDEO, AUDIO TRONG HTML5 ! Chèn âm thanh vào trang web sử dụng HTML5: Slide 4 - Làm việc với các thành phần video, audio, canvas của HTML5 13 CANVAS CANVAS ! Canvas là hàm API vẽ 2 chiều của HTML5 ! Hình vẽ sử dụng Canvas: ... dụng các thành phần Canvas ñể xác ñịnh bề mặt vẽ, nhưng phải xác ñịnh hướng vẽ và dòng kết quả, hình dạng, màu sắc với Javascript ! Canvas luôn làm việc cùng với javascript ! Các bước làm việc với Canvas: ! ðịnh ngh a thành phần canvas trong HTML ! Tham chiếu bối cảnh vẽ cho các phần từ ó như một biến trong Javascript Slide 4 - Làm việc với các thành phần video, audio, canvas của HTML5 15 CANVAS. .. Ν:Ω2:1ς61/:!#Μ03ΞΦΓ∃03ΞΗΓ∃03ΘΦΓ∃03ΘΗΓ∃ΦΓ∃ΗΣ∃ Slide 4 - Làm việc với các thành phần video, audio, canvas của HTML5 24 CANVAS ! Vẽ text: ctx.font = "bold 1.8em sans-serif"; ctx.fillText(text,x,y,maxWidth); 0∋ΦΨΖ#%∋∃[∃∴Ν#]∗∃ΞΨ⊥:ϑ∃ (.%(_(:12Ζ∴∃ !∀#∃%&&∋(#∀)∗+,−−./01/ 230,/45∗6/786/9:;