Bài thực hành số 4 – Làm việc với các thành phần của HTML5: Video, audio, canvas - ĐH FPT

Bài thực hành số 4 – Làm việc với các thành phần của HTML5: Video, audio, canvas sau đây giúp sinh viên làm việc được với các thành phần: video, audio, canvas. Toàn bộ bài tập trong các buổi lab, bắt buộc sinh viên phải viết mã bằng tay và sử dụng một trong các chương trình soạn thảo mã là Notepad và E -Text Editor. Chúc các bạn học tập tốt.
Nội dung trích xuất từ tài liệu:
Bài thực hành số 4 – Làm việc với các thành phần của HTML5: Video, audio, canvas - ĐH FPT 1 Bài thực hành số 4 – Làm việc với các thành phần của HTML5: video, audio, canvasChú ý chung với toàn bộ các buổi lab: - Toàn bộ bài tập trong các buổi lab, bắt buộc sinh viên phải viết mã bằng tay, sử dụng một trong các chương trình soạn thảo mã sau: o Notepad ++ o E- Text EditorMục tiêuBuổi thực hành số 5 giúp sinh viên làm việc được với các thành phần: - Video - Audio - CanvasWEB302_ HTML5 & CSS3 Lab4 2Bài 1Sinh viên tự thực hành trước các bước trong SGK với thư mục: - HTML5_09lessons - HTML5_10lessonsNộp thư mục hoàn thiện theo tên: - HTML5_09lessons_done - HTML5_10lessonsBắt buộc sinh viên phải làm và phải có kết quả nộp cho giảng viên theo dõi. Nếu sinh viên nàokhông thực hiện, giảng viên có quyền trừ điểm vào các bài tập sauWEB302_ HTML5 & CSS3 Lab4 3Bài 2Sử dụng layout có trong thư mục TaiNguyenLesson02Và những file video, audio có trong thư mục media, thực hiện dàn thành trang HTML5 chuẩnĐồng thời sử dụng kiến thức javascript ở bài trước, thực hiện yêu cầu sau: - Tạo 5 button: chạy, tạm dừng, 300, 500, 800 thực hiện:WEB302_ HTML5 & CSS3 Lab4 4 o Button “chạy”: khi người dùng nhấn nút này, đoạn movie sẽ chạy o Button “tạm dừng”: khi người dùng nhấn nút này, đoạn movie sẽ tạm ngừng chạy o Button “300, 500, 800”: khi người dùng nhấn các nút này, kích thước của movie sẽ tự động thay đổi theo chiều ngang lần lượt là 300px, 500px, 800px - Đối với file âm thanh (audio), khi thực hiện load trang sẽ tự động chạy (autoplay)Bài 3Sử dụng kết quả của file drawingloop.html thay đổi lại đường chuyển động của vật thể ufo theonhư hình minh họa sau:Sinh viên lưu file kết quả theo tên: ufo_loop.htmlYêu cầu nộp bàiWEB302_ HTML5 & CSS3 Lab4 5Cuối giờ thực hành, sinh viên tạo thư mục theo tên _Lab5, chứa tất cảsản phẩm của những bài lab trên, nén lại thành file zip và upload lên mục nộp bài tương ứngtrên LMS.WEB302_ HTML5 & CSS3 Lab4