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

Đồ họa và Đa phương tiệnHTML5 Canvas HTML5 Phần tử HTML được sử dụng để vẽ đồ họa trên trang web.. HTML Video - Hỗ trợ trình duyệt Trong HTML5, có 3 định dạng video được hỗ trợ: MP4, Web

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

HTML5

Canvas HTML5

Phần <canvas>tử HTML được sử dụng để vẽ đồ họa trên trang web

Đồ họa bên trái được tạo bằng <canvas> Nó cho thấy bốn yếu tố: một hình

chữ nhật màu đỏ, một hình chữ nhật gradient, một hình chữ nhật nhiều màu

và một văn bản nhiều màu

Ví dụ về Canvas

Canvas là một khu vực hình chữ nhật trên trang HTML Theo mặc định, canvas không có đường viền và không có nội dung

Đánh dấu trông giống như sau:

<canvas id="myCanvas" width="200" height="100"></canvas>

Lưu ý: Luôn luôn chỉ định một idthuộc tính (được đề cập đến trong một kịch bản), và một widthvà heightthuộc tính để xác định kích thước của canvas Để thêm đường viền, hãy sử dụng stylethuộc tính

Dưới đây là ví dụ về canvas cơ bản, trống:

I HTML5 SVG

SVG là gì?

 SVG là viết tắt của Scalable Vector Graphics

 SVG được sử dụng để xác định đồ họa cho Web

 SVG là một khuyến cáo của W3C

1 Phần tử HTML <svg>

Phần <svg>tử HTML là một vùng chứa cho đồ họa SVG

SVG có một số phương pháp để vẽ đường dẫn, hộp, hình tròn, văn bản và hình ảnh đồ họa

<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />

<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />

</linearGradient>

</defs>

<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />

<text fill="#ffffff" font-size="45" font-family="Verdana" x="50"

y="86">SVG</text>

Sorry, your browser does not support inline SVG

</svg>

Sự khác biệt giữa SVG và Canvas

SVG là một ngôn ngữ để mô tả đồ họa 2D trong XML

Canvas vẽ đồ họa 2D, khi đang di chuyển (với JavaScript)

SVG dựa trên XML, có nghĩa là mọi phần tử có sẵn trong DOM SVG Bạn có thể đính kèm trình xử lý sự kiện JavaScript cho một phần tử

Trong SVG, mỗi hình vẽ được ghi nhớ là một đối tượng Nếu thuộc tính của đối tượng SVG bị thay đổi, trình duyệt có thể tự động hiển thị lại hình dạng

Canvas được hiển thị pixel theo pixel Trong canvas, khi đồ họa được vẽ, nó bị quên bởi trình duyệt Nếu vị trí của nó nên được thay đổi, toàn bộ cảnh cần phải được vẽ lại, bao gồm bất kỳ đối tượng nào có thể đã được bao phủ bởi đồ họa

So sánh Canvas và SVG

Bảng dưới đây cho thấy một số khác biệt quan trọng giữa Canvas và SVG:

 Resolution dependent

 No support for event handlers

 Poor text rendering capabilities

 You can save the resulting

image as png or jpg

 Well suited for graphic-intensive

games

 Resolution independent

 Support for event handlers

 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

Đa phương tiện HTML

Đa phương tiện trên web là âm thanh, nhạc, video, phim và hoạt ảnh

Đa phương tiện có nhiều định dạng khác nhau Nó có thể là hầu như bất cứ điều

gì bạn có thể nghe hoặc nhìn thấy

Ví dụ: Hình ảnh, âm nhạc, âm thanh, video, bản ghi, phim, hoạt ảnh và hơn thế nữa

Các trang web thường chứa các phần tử đa phương tiện thuộc các loại và định dạng khác nhau

Trong chương này, bạn sẽ tìm hiểu về các định dạng đa phương tiện khác nhau.Định dạng đa phương tiện

Các yếu tố đa phương tiện (như âm thanh hoặc video) được lưu trữ trong các tậptin media

Cách phổ biến nhất để khám phá loại tệp là xem phần mở rộng của tệp

Các tệp đa phương tiện có định dạng và các phần mở rộng khác nhau như: swf, wav, mp3, mp4, mpg, wmv và avi

Định dạng video phổ biến

MP4 là định dạng mới và sắp tới cho video trên internet

MP4 được YouTube đề xuất

MP4 được hỗ trợ bởi Flash Players

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

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 streamingwith low bandwidths It is still used for online video and Internet TV, but does not play in web browsers

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 và Ogg được hỗ trợ theo tiêu chuẩn HTML5

Định dạng âm thanh

MP3 là định dạng mới nhất cho nhạc đã đượ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 của bạn là về âm nhạc được ghi lại, MP3 là sự lựa chọn

.midi

MIDI (Musical Instrument Digital Interface) Main format for all electronic music devices like synthesizers and PC sound cards MIDI files do 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

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 thanh MP3, WAV và Ogg được hỗ trợ bởi tiêu chuẩn HTML5

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Your browser does not support the video tag

Thí dụ

<video width="320" height="240" autoplay>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Your browser does not support the video tag

</video>

Thuộc tính autoplay không hoạt động trong các thiết bị di động như iPad và iPhone

HTML Video - Hỗ trợ trình duyệt

Trong HTML5, có 3 định dạng video được hỗ trợ: MP4, WebM và Ogg

Hỗ trợ trình duyệt cho các định dạng khác nhau là:

HTML Video - Loại phương tiện

<video> Defines a video or movie

<source> Defines multiple media resources for media elements,

such as <video> and <audio>

<track> Defines text tracks in media players

Âm thanh trên Web

Trước HTML5, tệp âm thanh chỉ có thể được phát trong trình duyệt có plugin (như flash)

Phần <audio>tử HTML5 chỉ định cách chuẩn để nhúng âm thanh vào trang web

Phần tử HTML <audio>

Để phát tệp âm thanh trong HTML, hãy sử dụng <audio>phần tử:

Thí dụ

<audio controls>

<source src="horse.ogg" type="audio/ogg">

<source src="horse.mp3" type="audio/mpeg">

Your browser does not support the audio element

Văn bản giữa các thẻ <audio>và </audio>sẽ chỉ được hiển thị trong các trình duyệt không hỗ trợ <audio>phần tử

Âm thanh HTML - Loại phương tiện

Âm thanh HTML - Phương thức, thuộc

<audio> Defines sound content

<source> Defines multiple media resources for media elements, such as

<video> and <audio>

Mục đích của một trình cắm thêm là mở rộng chức năng của một trình duyệt web

Người trợ giúp HTML (Trình cắm)

Ứng dụng trình trợ giúp (plug-in) là các chương trình máy tính mở rộng chức năng tiêu chuẩn của trình duyệt web

Ví dụ về các trình cắm thêm nổi tiếng là các ứng dụng Java

Các plugin có thể được thêm vào các trang web có <object>thẻ

Phần <object>tử được hỗ trợ bởi tất cả các trình duyệt

Phần <object>tử định nghĩa một đối tượng được nhúng trong một tài liệu HTML

Nó được sử dụng để nhúng các trình cắm thêm (như các ứng dụng Java, trình đọc PDF, Trình phát Flash) trong các trang web

Thí dụ

<object width="400" height="50" data="bookmark.swf"></object>

Phần <object>tử này cũng có thể được sử dụng để bao gồm HTML trong HTML:Thí dụ

<object width="100%" height="500px" data="snippet.html"></object>

Hoặc hình ảnh nếu bạn thích:

Thí dụ

<object data="audi.jpeg"></object>

Phần tử <embed>

Phần <embed>tử được hỗ trợ trong tất cả các trình duyệt chính

Phần <embed>tử cũng định nghĩa một đối tượng nhúng trong một tài liệu HTML

Các trình duyệt web đã hỗ trợ phần tử <embed> trong một thời gian dài Tuy nhiên, nó không phải là một phần của đặc tả HTML trước HTML5

Thí dụ

<embed width="400" height="50" src="bookmark.swf">

Lưu ý rằng phần tử <embed> không có thẻ đóng Nó không thể chứa văn bản thay thế

Phần <embed>tử này cũng có thể được sử dụng để bao gồm HTML trong HTML:Thí dụ

<embed width="100%" height="500px" src="snippet.html">

Hoặc hình ảnh nếu bạn thích:

Thí dụ

<embed src="audi.jpeg">

IV HTML video trên YouTube

Cách dễ nhất để phát video trong HTML là sử dụng YouTube

Đấu tranh với định dạng video?

Trước đó trong hướng dẫn này, bạn đã thấy rằng bạn có thể phải chuyển đổi video của bạn sang các định dạng khác nhau để làm cho chúng phát trong tất cảcác trình duyệt

Chuyển đổi video sang các định dạng khác nhau có thể khó khăn và tốn thời gian.

Một giải pháp dễ dàng hơn là cho phép YouTube phát video trong trang web của bạn

Id video trên YouTube

YouTube sẽ hiển thị id (như tgbNymZ7vqY), khi bạn lưu (hoặc phát) một video.Bạn có thể sử dụng id này và tham khảo video của bạn trong mã HTML

Phát video YouTube bằng HTML

Để phát video của bạn trên trang web, hãy làm như sau:

 Tải video lên YouTube

 Ghi lại id video

 Xác định phần tử <iframe> trong trang web của bạn

 Cho phép thuộc tính src trỏ tới URL của video

 Sử dụng các thuộc tính chiều rộng và chiều cao để xác định kích thước của trình phát

 Thêm bất kỳ tham số nào khác vào URL (xem bên dưới)

Ví dụ - Sử dụng iFrame (được khuyến nghị)

<iframe width="420" height="315"

Lưu ý: Cân nhắc cẩn thận khi quyết định tự động phát video của bạn Tự động

bắt đầu một video có thể làm phiền khách truy cập của bạn và kết thúc gây hại nhiều hơn lợi

Giá trị 0 (mặc định): Video sẽ không phát tự động khi trình phát tải

Giá trị 1: Video sẽ phát tự động khi trình phát tải

YouTube - Tự động phát

<iframe width="420" height="315"

src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">

</iframe>

Danh sách phát trên YouTube

Danh sách video được phân cách bằng dấu phẩy (ngoài URL gốc)

Điều khiển YouTube

Giá trị 0: Điều khiển trình phát không hiển thị

Giá trị 1 (mặc định): Hiển thị điều khiển trình phát

YouTube - Kiểm soát

<iframe width="420" height="315"

src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">

</iframe>

YouTube - Sử dụng <object> hoặc

<embed>

Lưu ý: YouTube <object>và <embed>không được dùng nữa từ tháng 1 năm

2015 Bạn nên di chuyển video của mình để sử dụng <iframe>thay thế

Ví dụ - Sử dụng <object> (không được chấp nhận)

<object width="420" height="315"

data="https://www.youtube.com/embed/tgbNymZ7vqY">

</object>

Ví dụ - Sử dụng <embed> (không được chấp nhận)

<embed width="420" height="315"

src="https://www.youtube.com/embed/tgbNymZ7vqY">