Đồ họa và Đa phương tiện HTML5 W3schools

W3schools – Le Trai Đồ họa Đa phương tiện HTML5 Canvas HTML5 Phần tử HTML sử dụng để vẽ đồ họa trang web Đồ họa bên trái tạo Nó cho thấy bốn yếu tố: hình chữ nhật màu đỏ, hình chữ nhật gradient, hình chữ nhật nhiều màu văn nhiều màu HTML Canvas gì? Phần tử HTML sử dụng để vẽ đồ họa, nhanh chóng, thông qua JavaScript Phần tử vùng chứa đồ họa Bạn phải sử dụng JavaScript để vẽ đồ họa Canvas có số phương pháp để vẽ đường dẫn, hộp, hình tròn, văn thêm hình ảnh Hỗ trợ trình duyệt Các số bảng định phiên trình duyệt hỗ trợ đầy đủ phần tử Element CHROM EDGE FIREFOX SAFARI OPERA 4.0 9.0 2.0 3.1 9.0 W3schools – Le Trai Ví dụ Canvas Canvas khu vực hình chữ nhật trang HTML Theo mặc định, canvas khơng có đường viền khơng có nội dung Đánh dấu trơng giống sau: Lưu ý: Luôn ln định idthuộc tính (được đề cập đến kịch bản), widthvà heightthuộc tính để xác định kích thước canvas Để thêm đường viền, sử dụng stylethuộc tính Dưới ví dụ canvas bản, trống: Vẽ đường thẳng Thí dụ var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); ctx.lineTo(200, 100); ctx.stroke(); Vẽ vòng tròn Thí dụ var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); W3schools – Le Trai ctx.arc(95, 50, 40, 0, * Math.PI); ctx.stroke(); Vẽ văn Thí dụ var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World", 10, 50); Văn Stroke Thí dụ var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.strokeText("Hello World", 10, 50); Vẽ Linear Gradient Thí dụ var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); W3schools – Le Trai // Create gradient var grd = ctx.createLinearGradient(0, 0, 200, 0); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); Vẽ Gradient tròn Thí dụ var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); Vẽ hình ảnh var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = document.getElementById("scream"); ctx.drawImage(img, 10, 10); W3schools – Le Trai I HTML5 SVG SVG gì?  SVG viết tắt Scalable Vector Graphics  SVG sử dụng để xác định đồ họa cho Web  SVG khuyến cáo W3C Phần tử HTML Phần tử HTML vùng chứa cho đồ họa SVG SVG có số phương pháp để vẽ đường dẫn, hộp, hình tròn, văn hình ảnh đồ họa Vòng kết nối SVG Thí dụ Hình chữ nhật SVG W3schools – Le Trai Thí dụ Hình chữ nhật tròn SVG Thí dụ SVG Star Thí dụ Biểu trưng SVG SVG Thí dụ SVG Sorry, your browser does not support inline SVG W3schools – Le Trai Sự khác biệt SVG Canvas SVG ngôn ngữ để mô tả đồ họa 2D XML Canvas vẽ đồ họa 2D, di chuyển (với JavaScript) SVG dựa XML, có nghĩa phần tử có sẵn DOM SVG Bạn đính kèm trình xử lý kiện JavaScript cho phần tử Trong SVG, hình vẽ ghi nhớ đối tượng Nếu thuộc tính đối tượng SVG bị thay đổi, trình duyệt tự động hiển thị lại hình dạng Canvas hiển thị pixel theo pixel Trong canvas, đồ họa vẽ, bị quên trình duyệt Nếu vị trí nên thay đổi, toàn cảnh cần phải vẽ lại, bao gồm đối tượng bao phủ đồ họa So sánh Canvas SVG Bảng cho thấy số khác biệt quan trọng Canvas SVG: Canvas SVG  Resolution dependent  Resolution independent  No support for event handlers  Support for event handlers  Poor text rendering capabilities   You can save the resulting image as png or jpg Best suited for applications with large rendering areas (Google Maps)  Slow rendering if complex (anything that uses the DOM a lot will be slow)  Not suited for game applications  Well suited for graphic-intensive games W3schools – Le Trai Đa phương tiện HTML Đa phương tiện web âm thanh, nhạc, video, phim hoạt ảnh I Đa phương tiện HTML Đa phương tiện gì? Đa phương tiện có nhiều định dạng khác Nó điều bạn nghe nhìn thấy Ví dụ: Hình ảnh, âm nhạc, âm thanh, video, ghi, phim, hoạt ảnh Các trang web thường chứa phần tử đa phương tiện thuộc loại định dạng khác Trong chương này, bạn tìm hiểu định dạng đa phương tiện khác Định dạng đa phương tiện Các yếu tố đa phương tiện (như âm video) lưu trữ tập tin media Cách phổ biến để khám phá loại tệp xem phần mở rộng tệp Các tệp đa phương tiện có định dạng phần mở rộng khác như: swf, wav, mp3, mp4, mpg, wmv avi Định dạng video phổ biến W3schools – Le Trai MP4 định dạng tới cho video internet MP4 YouTube đề xuất MP4 hỗ trợ Flash Players MP4 hỗ trợ HTML5 Format File Description MPEG mpg mpeg MPEG Developed by the Moving Pictures Expert Group The first popular video format on the web Used to be supported by all browsers, but it is not supported in HTML5 (See MP4) AVI avi AVI (Audio Video Interleave) Developed by Microsoft Commonly used in video cameras and TV hardware Plays well on Windows computers, but not in web browsers WMV wmv WMV (Windows Media Video) Developed by Microsoft Commonly used in video cameras and TV hardware Plays well on Windows computers, but not in web browsers QuickTim e mov QuickTime Developed by Apple Commonly used in video cameras and TV hardware Plays well on Apple computers, but not in web browsers (See MP4) RealVideo rm ram RealVideo Developed by Real Media to allow video streaming with low bandwidths It is still used for online video and Internet TV, but does not play in web browsers W3schools – Le Trai Flash swf flv Flash Developed by Macromedia Often requires an extra component (plug-in) to play in web browsers Ogg ogg Theora Ogg Developed by the Xiph.Org Foundation Supported by HTML5 WebM webm WebM Developed by the web giants, Mozilla, Opera, Adobe, and Google Supported by HTML5 MPEG-4 or MP4 mp4 MP4 Developed by the Moving Pictures Expert Group Based on QuickTime Commonly used in newer video cameras and TV hardware Supported by all HTML5 browsers Recommended by YouTube Chỉ có video MP4, WebM Ogg hỗ trợ theo tiêu chuẩn HTML5 Định dạng âm MP3 định dạng cho nhạc nén Thuật ngữ MP3 trở thành đồng nghĩa với âm nhạc kỹ thuật số Nếu trang web bạn âm nhạc ghi lại, MP3 lựa chọn Format File Description MIDI mid midi MIDI (Musical Instrument Digital Interface) Main format for all electronic music devices like synthesizers and PC sound cards MIDI files not contain sound, but digital notes that can be played by electronics Plays well on all computers and music hardware, but not in web browsers W3schools – Le Trai RealAudi o rm ram RealAudio Developed by Real Media to allow streaming of audio with low bandwidths Does not play in web browsers WMA wma WMA (Windows Media Audio) Developed by Microsoft Commonly used in music players Plays well on Windows computers, but not in web browsers AAC aac AAC (Advanced Audio Coding) Developed by Apple as the default format for iTunes Plays well on Apple computers, but not in web browsers WAV wav WAV Developed by IBM and Microsoft Plays well on Windows, Macintosh, and Linux operating systems Supported by HTML5 Ogg ogg Ogg Developed by the Xiph.Org Foundation Supported by HTML5 MP3 mp3 MP3 files are actually the sound part of MPEG files MP3 is the most popular format for music players Combines good compression (small files) with high quality Supported by all browsers MP4 mp4 MP4 is a video format, but can also be used for audio MP4 video is the upcoming video format on the internet This leads to automatic support for MP4 audio by all browsers Chỉ âm MP3, WAV Ogg hỗ trợ tiêu chuẩn HTML5 W3schools – Le Trai II Video HTML5 Phát video HTML Trước HTML5, video phát trình duyệt có plugin (như flash) Phần tử HTML5 định cách chuẩn để nhúng video vào trang web Phần tử HTML Để hiển thị video HTML, sử dụng phần tử: Thí dụ Your browser does not support the video tag Làm hoạt động Các controlsthuộc tính bổ sung thêm điều khiển video, chơi, tạm dừng, khối lượng Bạn nên luôn bao gồm widthvà heightcác thuộc tính Nếu chiều cao chiều rộng khơng đặt, trang nhấp nháy video tải Phần tử cho phép bạn định tệp video thay mà trình duyệt chọn Trình duyệt sử dụng định dạng nhận dạng Văn thẻ và sẽ hiển thị trình duyệt khơng hỗ trợ phần tử HTML Tự động phát Để bắt đầu video tự động sử dụng autoplaythuộc tính: W3schools – Le Trai Thí dụ Your browser does not support the video tag Thuộc tính autoplay khơng hoạt động thiết bị di động iPad iPhone HTML Video - Hỗ trợ trình duyệt Trong HTML5, có định dạng video hỗ trợ: MP4, WebM Ogg Hỗ trợ trình duyệt cho định dạng khác là: Browser MP4 WebM Ogg Internet Explorer YES NO NO Chrome YES YES YES Firefox YES YES YES Safari YES NO NO Opera YES (from Opera 25) YES YES W3schools – Le Trai HTML Video - Loại phương tiện File Format Media Type MP4 video/mp4 WebM video/webm Ogg video/ogg HTML Video - Phương thức, thuộc tính kiện HTML5 định nghĩa phương thức DOM, thuộc tính kiện cho phần tử Điều cho phép bạn tải, phát tạm dừng video thời lượng âm lượng thiết lập Ngoài có kiện DOM thơng báo cho bạn video bắt đầu phát, bị tạm dừng, v.v Thẻ video HTML5 Tag Description W3schools – Le Trai Defines a video or movie Defines multiple media resources for media elements, such as and Defines text tracks in media players II Âm HTML5 Âm Web Trước HTML5, tệp âm phát trình duyệt có plugin (như flash) Phần tử HTML5 định cách chuẩn để nhúng âm vào trang web Phần tử HTML Để phát tệp âm HTML, sử dụng phần tử: W3schools – Le Trai Thí dụ Your browser does not support the audio element HTML Audio - Cách hoạt động Các controlsthuộc tính bổ sung thêm điều khiển âm thanh, giống chơi, tạm dừng, khối lượng Phần tử cho phép bạn định tệp âm thay mà trình duyệt chọn Trình duyệt sử dụng định dạng nhận dạng Văn thẻ và sẽ hiển thị trình duyệt khơng hỗ trợ phần tử Âm HTML - Loại phương tiện File Format Media Type MP3 audio/mpeg OGG audio/ogg WAV audio/wav W3schools – Le Trai Âm HTML - Phương thức, thuộc tính kiện HTML5 định nghĩa phương thức DOM, thuộc tính kiện cho phần tử Điều cho phép bạn tải, phát tạm dừng âm thanh, thời lượng âm lượng đặt Ngồi có kiện DOM thông báo cho bạn âm bắt đầu phát, bị tạm dừng, v.v Để có tham chiếu DOM đầy đủ, truy cập Tham chiếu DOM âm / video HTML5 Thẻ âm HTML5 Tag Description Defines sound content Defines multiple media resources for media elements, such as and III Trình cắm HTML Mục đích trình cắm thêm mở rộng chức trình duyệt web W3schools – Le Trai Người trợ giúp HTML (Trình cắm) Ứng dụng trình trợ giúp (plug-in) chương trình máy tính mở rộng chức tiêu chuẩn trình duyệt web Ví dụ trình cắm thêm tiếng ứng dụng Java Các plugin thêm vào trang web có thẻ thẻ Trình cắm sử dụng cho nhiều mục đích: hiển thị đồ, quét vi-rút, xác minh id ngân hàng bạn, v.v Để hiển thị video âm thanh: Sử dụng thẻ và Phần tử Phần tử hỗ trợ tất trình duyệt Phần tử định nghĩa đối tượng nhúng tài liệu HTML Nó sử dụng để nhúng trình cắm thêm (như ứng dụng Java, trình đọc PDF, Trình phát Flash) trang web Thí dụ Phần tử sử dụng để bao gồm HTML HTML: Thí dụ Hoặc hình ảnh bạn thích: Thí dụ W3schools – Le Trai Phần tử Phần tử hỗ trợ tất trình duyệt Phần tử định nghĩa đối tượng nhúng tài liệu HTML Các trình duyệt web hỗ trợ phần tử thời gian dài Tuy nhiên, phần đặc tả HTML trước HTML5 Thí dụ Lưu ý phần tử khơng có thẻ đóng Nó khơng thể chứa văn thay Phần tử sử dụng để bao gồm HTML HTML: Thí dụ Hoặc hình ảnh bạn thích: Thí dụ IV HTML video YouTube Cách dễ để phát video HTML sử dụng YouTube Đấu tranh với định dạng video? Trước hướng dẫn này, bạn thấy bạn phải chuyển đổi video bạn sang định dạng khác để làm cho chúng phát tất trình duyệt W3schools – Le Trai Chuyển đổi video sang định dạng khác khó khăn tốn thời gian Một giải pháp dễ dàng cho phép YouTube phát video trang web bạn Id video YouTube YouTube hiển thị id (như tgbNymZ7vqY), bạn lưu (hoặc phát) video Bạn sử dụng id tham khảo video bạn mã HTML Phát video YouTube HTML Để phát video bạn trang web, làm sau:  Tải video lên YouTube  Ghi lại id video  Xác định phần tử trang web bạn  Cho phép thuộc tính src trỏ tới URL video  Sử dụng thuộc tính chiều rộng chiều cao để xác định kích thước trình phát  Thêm tham số khác vào URL (xem bên dưới) Ví dụ - Sử dụng iFrame (được khuyến nghị) Tự động phát YouTube Bạn bắt đầu phát video tự động người dùng truy cập trang cách thêm tham số đơn giản vào URL YouTube bạn W3schools – Le Trai Lưu ý: Cân nhắc cẩn thận định tự động phát video bạn Tự động bắt đầu video làm phiền khách truy cập bạn kết thúc gây hại nhiều lợi Giá trị (mặc định): Video khơng phát tự động trình phát tải Giá trị 1: Video phát tự động trình phát tải YouTube - Tự động phát Danh sách phát YouTube Danh sách video phân cách dấu phẩy (ngoài URL gốc) Vòng lặp YouTube Giá trị (mặc định): Video phát lần Giá trị 1: Video lặp (mãi mãi) YouTube - Vòng lặp Điều khiển YouTube Giá trị 0: Điều khiển trình phát khơng hiển thị Giá trị (mặc định): Hiển thị điều khiển trình phát W3schools – Le Trai YouTube - Kiểm soát YouTube - Sử dụng Lưu ý: YouTube và không dùng từ tháng năm 2015 Bạn nên di chuyển video để sử dụng thay Ví dụ - Sử dụng (khơng chấp nhận) Ví dụ - Sử dụng (không chấp nhận) ... graphic-intensive games W3schools – Le Trai Đa phương tiện HTML Đa phương tiện web âm thanh, nhạc, video, phim hoạt ảnh I Đa phương tiện HTML Đa phương tiện gì? Đa phương tiện có nhiều định dạng... web thường chứa phần tử đa phương tiện thuộc loại định dạng khác Trong chương này, bạn tìm hiểu định dạng đa phương tiện khác Định dạng đa phương tiện Các yếu tố đa phương tiện (như âm video) lưu... tiêu chuẩn HTML5 W3schools – Le Trai II Video HTML5 Phát video HTML Trước HTML5, video phát trình duyệt có plugin (như flash) Phần tử HTML5 định cách chuẩn để nhúng video vào trang web