HTML5 XP session 11 HTML5 audio và video t6

Mô tả sự cần thiết của đa phương tiện trong HTML5Liệt kê các loại đa phương tiện được hỗ trợ trong HTML5Giải thích phần tử audio trong HTML5Giải thích phần tử video trong HTML5Giải thích khả năng truy cập các phần tử audio và videoGiải thích cách giải quyết với trình duyệt không hỗ trợ.

Trang 1

Bài 11:

Audio và Video HTML5

NexTGen Web

Trang 2

© Aptech Ltd HTML5/ Audio và Video 2

Mục tiêu

 Mô tả sự cần thiết của đa phương tiện trong HTML5

 Liệt kê các loại đa phương tiện được hỗ trợ trong HTML5

 Giải thích phần tử audio trong HTML5

 Giải thích phần tử video trong HTML5

 Giải thích khả năng truy cập các phần tử audio và video

 Giải thích cách giải quyết với trình duyệt không hỗ trợ.

Trang 3

© Aptech Ltd

Các trình duyệt web truyền thống chỉ có khả năng xử lý đồ họa và văn bản

Để có thể xem được một số video, người sử dụng phải cài đặt thêm các chương trình riêng biệt là plug-in hoặc một điều khiển ActiveX

Trước đây, các nhà thiết kế và phát triển web thường dùng plug-in như Silverlight , hoặc Adobe Flash player để các trang web có thể phát được âm thanh và video

3 HTML5/ Audio và Video

Giới thiệu

Trang 4

© Aptech Ltd

Đa phương tiện(multimedia) là sự kết hợp nhiều thành phần khác nhau như video, âm

thanh(sound), đồ họa(graphic), và văn bản(text)

Đa phương tiện(multimedia) là sự kết hợp nhiều thành phần khác nhau như video, âm

thanh(sound), đồ họa(graphic), và văn bản(text)

Cách phổ biến đề chèn một nội dung đa phương tiện trên các trang web là nhúng một tập tin video hoặc audio vào trang web

HTML5 giới thiệu phần tử <audio> và <video> để dễ dàng cho việc đưa vào website các audio

và video mà không cần phải có Flash

HTML5 giới thiệu phần tử <audio> và <video> để dễ dàng cho việc đưa vào website các audio

và video mà không cần phải có Flash

HTML5 cung cấp cho các nhà phát triển các tính năng nhúng phương tiện truyền thông trên các trang web theo phương thức chuẩn

Do vậy người dùng không phải phụ thuộc vào Flash để truy cập audio và video

Đa phương tiện trong HTML5

Trang 5

Các codec khác nhau có mức độ chất lượng nén khác nhau

Để lưu trữ và truyền tải video và audio được mã hóa với nhau, một định dạng container được sử dụng.

Có một số định dạng container như Ogg (.Ogv), Audio Video Interleave (.avi), Flash Video (.flv), và nhiều định dạng container khác.

WebM là một định dạng container video mã nguồn mở mới được hỗ trợ bởi Google Mỗi trình duyệt khác nhau hỗ trợ định dạng container khác nhau

Các kiểu audio và video được hỗ trợ

Trang 6

Các định dạng audio

 Có ba định dạng file được hỗ trợ cho các phần tử <audio> trong HTML5

 Bảng sau liệt kê các định dạng tập tin âm thanh được hỗ trợ bởi các trình duyệt web:

Trình duyệt hỗ trợ MP3 WAV Ogg

Trang 7

Các định dạng video

 Có ba định dạng file được hỗ trợ cho các phần tử <video> trong HTML5

 Bảng dưới đây liệt kê các định dạng tập tin video được hỗ trợ bởi các trình duyệt web:

Trang 8

© Aptech Ltd

Audio formats frequently used are wav, ogg, and mp3.

Phần tử audio HTML5

 Phần tử <audio> giúp các nhà phát triển nhúng âm nhạc vào trang web

 Phần tử <audio> xác định tập tin âm thanh được sử dụng trong các tài liệu HTML

 Thuộc tính src được sử dụng để liên kết các tập tin âm thanh

 Mã số câu liên quan hiển thị nhúng các tập tin âm thanh trong trang web bằng cách sử dụng thẻ <audio>.

controls autoplay loop>

html5 audio not supported

</audio>

</body>

</html>

Trang 9

© Aptech Ltd

Thuộc tính cung cấp thông tin bổ sung cho trình duyệt về các từ khóa.

Một số thuộc tính dùng để kiểm soát giao diện của các chức năng khác nhau.

Phần tử <audio> của HTML5 có các thuộc tính sau:

Thuộc tính Mô tả

autoplay Sử dụng thuộc tính này với giá trị true nếu muốn audio tự động play luôn sau khi nó được tải vào trình duyệt

autobuffer Sử dụng thuộc tính này nếu muốn tự động tạo bộ đệm khi bắt đầu

controls Thuộc tính này xác định audio có hay không hiện diện trên trang Nếu có, sẽ hiện diện cùng với các tính năng điều khiển âm thanh

chẳng hạn như các nút resume, pause, play, và volume

loop Sử dụng thuộc tính này nếu muốn audio sau khi kết thúc play sẽ tự động play lặp lại.

preload Thuộc tính này xác định liệu âm thanh đã được nạp khi tải trang và sẵn sàng để thực hiện

muted

Các thuộc tính của thẻ audio

 Bảngdưới đây liệt kê một số các thuộc tính thẻ <audio>.

Trang 10

© Aptech Ltd

Thẻ <embed> được sử dụng để có thể play audio trong các trình duyệt cũ.

Thẻ <embed> có hai thuộc tính, src và autostart.

Thuộc tính src được sử dụng để xác định nguồn của âm thanh.

thuộc tính autostart điều khiển audio và xác định xem audio có nên play ngay khi trang được tải.

 Đoạn code minh họa sử dụng thẻ <embed> trong phần tử <audio>

Tạo tệp tin audio

Your browser does not support the

audio element.

</audio>

Trang 11

Phần tử video trong HTML5

 Nếu phần tử <video> không được hỗ trợ bởi trình duyệt sau đó nội dung giữa

thẻ bắt đầu và thẻ kết thúc được hiển thị

 Thuộc tính src được sử dụng để liên kết đến tập tin video

 Đoạn code sau minh họa sử dụng phần tử <video>

Your browser does not support the video

</video>

 Phần tử <video> là một tính năng mới được thêm vào trong HTML5

 Phần tử <video> cho phép nhúng nội dung video trên các trang web

Trang 12

Các thuộc tính của thẻ video

Các thuộc tính Mô tả

autoplay Xác định rằng trình duyệt sẽ bắt đầu chơi video ngay sau khi nó đã sẵn sàng

muted Cho phép để tắt tiếng video ban đầu, nếu thuộc tính này đang tồn tại

controls Cho phép hiển thị các điều khiển của video, nếu thuộc tính tồn tại

loop Xác định rằng trình duyệt nên lặp lại chơi video hiện một lần nữa nếu thuộc tính vòng lặp

tồn tại và chấp nhận một giá trị booleanpreload Xác định xem các đoạn video sẽ được nạp hay không khi trang được tải

Trang 13

© Aptech Ltd

None – Trình duyệt không nên tải video trong khi trang đang được tải.

Metadata – Trình duyệt chỉ nên tải metadata khi trang đang được tải.

Auto - Trình duyệt nên tải toàn bộ video trong khi trang đang được tải

Chuẩn bị tải video

 Thuộc tính preload của phần tử <video> được dùng để chỉ ra có nên tải hoặc buffering file video khi trang đang được tải hay không

 Các giá trị của thuộc tính preload:

Trang 14

Trang 15

Thiết lập kích thước video

 Người dùng có thể xác định kích thước của video bằng thuộc tính width và height của phần tử <video>

 Nếu chỉ ra các thuộc tính này, trình duyệt sẽ thiết lập video với kích thước của video

 Đoạn code minh họa sử dụng thuộc tính width và height để xác định kích thước phần tử <video>

Your browser does not support the video.

</video>

</body>

</html>

Trang 16

Chuyển đổi các tệp video

 Có nhiều vấn đề với các nhà cung cấp trình duyệt để hỗ trợ các định dạng video khác nhau trên trang web

 Sau đây là một số các định dạng video được hỗ trợ bởi các trình duyệt :

Trang 17

Khả năng truy cập các phần tử audio và video 1-2

 Các hãng trên toàn thế giới đang thuê những người có kỹ năng và khả năng đa dạng Họ có thể là những người có khả năng hạn chế, bị khuyết tật , khiếm thị, nhận thức, khả năng di chuyển kém

 Khả năng tiếp cận(accessibility) là mức độ sẵn sàng và dễ dàng để số lượng lớn người dùng khác nhau bao gồm cả những người bị khuyết tật có thể sử dụng được máy tính

 Trong khi phát triển một ứng dụng rất nhiều giả định sẽ được xem xét và một số trong số chúng là như sau:

Trang 18

Khả năng truy cập các phần tử audio và video 2-2

 Những giả định này đáp ứng các yêu cầu của đại đa số người dùng truy cập các ứng dụng

 Nhưng không phải tất cả người dùng sẽ thuộc vào nhóm này

 Do đó một tập hợp các giả định sẽ được xem xét cho người sử dụng đó như sau:

Trang 19

Phần tử track 1-3

Trang 20

src Chứa các URL của các dữ liệu track văn bản

srclang Chứa các ngôn ngữ của các dữ liệu track văn bản

kind Chứa các loại nội dung mà định nghĩa track được sử dụng

default Chỉ ra rằng điều này sẽ được track mặc định nếu người dùng không xác định giá trị

label Quy định cụ thể các tiêu đề được hiển thị cho người sử dụng

 Bảng sau liệt kê các thuộc tính phần tử track

Trang 21

 Mã số câu liên quan trình bày cách một phần tử track được sử dụng kết hợp với các phần tử <video> cung cấp phụ đề.

</video>

 Mã số câu liên quan trình bày cách một phần tử track được sử dụng kết hợp với các phần tử <video> cung cấp phụ đề bằng ngôn ngữ khác.

</video>

Trang 22

Tổng kết

 Đa phương tiện là sự kết hợp của các phần tử khác nhau như video, đồ họa, âm thanh và văn bản

 Có nhiều loại phương tiện truyền thông khác nhau được sử dụng cho âm thanh và các tập tin video trên các trang web khác nhau

 Các phần tử <audio> sẽ giúp các nhà phát triển nhạc nhúng trên các trang web và cho phép người dùng nghe nhạc

 Người dùng có thể chơi các âm thanh trong trình duyệt cũ hơn bằng cách sử dụng thẻ <embed>

 Các phần tử <video> được sử dụng để nhúng nội dung video trên các trang web

 Thuộc tính preload xác định liệu âm thanh phải được tải khi tải trang và sẵn sàng để thực thi

 WebM là một mã nguồn mở định dạng container video mới được hỗ trợ bởi Google

Trang 23

Trang 24

Khả năng truy cập các phần tử audio và video

 Hỗ trợ Audio

 Hỗ trợ Video

Định dạng
Số trang	24
Dung lượng	641,38 KB