Đ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ử và để dễ dàng cho việc đưa vào website các audio và video mà không cần phải có Flash.
BÀI 11 Audio & Video Link Video https://www.youtube.com/channel/UCae8641S8pml800w73YpOzA NexTGen Web Bài 11: Audio Video HTML5 Mục tiêu Mô tả cần thiết đa phương tiện HTML5 Liệt kê loại đa phương tiện hỗ trợ HTML5 Giải thích phần tử audio HTML5 Giải thích phần tử video HTML5 Giải thích khả truy cập phần tử audio video Giải thích cách giải với trình duyệt không hỗ trợ © Aptech Ltd HTML5/ Audio Video Giới thiệu Các trình duyệt web truyền thống có khả xử lý đồ họa văn Để xem số video, người sử dụng phải cài đặt thêm chương trình riêng biệt plug-in điều khiển ActiveX Trước đây, nhà thiết kế phát triển web thường dùng plug-in Silverlight , Adobe Flash player để trang web phát âm video © Aptech Ltd HTML5/ Audio Video Đa phương tiện HTML5 Đa phương tiện(multimedia) kết hợp nhiều thành phần khác video, âm thanh(sound), đồ họa(graphic), văn bản(text) Cách phổ biến đề chèn nội dung đa phương tiện trang web nhúng tập tin video audio vào trang web HTML5 giới thiệu phần tử để dễ dàng cho việc đưa vào website audio video mà không cần phải có Flash HTML5 cung cấp cho nhà phát triển tính nhúng phương tiện truyền thông trang web theo phương thức chuẩn Do người dùng phụ thuộc vào Flash để truy cập audio video © Aptech Ltd HTML5/ Audio Video Các kiểu audio video hỗ trợ Bảng liệt kê định dạng audio video phổ biến: Có nhiều loại giải mã (codec) video audio khác sử dụng để xử lý tập tin video audio Codec thiếtContainer bị chương trình sửVideo dụngCodec để mã hóa giải mã luồng(stream) liệu kỹ thuật số Codec Audio Mp4 H.264 Các codec Ogg khác có mức độ chất Theora lượng nén khác WebM VP8 AAC Vorbis Vorbis Để lưu trữ truyền tải video audio mã hóa với nhau, định dạng container sử dụng Có số định dạng container Ogg (.Ogv), Audio Video Interleave (.avi), Flash Video (.flv), nhiều định dạng container khác WebM định dạng container video mã nguồn mở hỗ trợ Google Mỗi trình duyệt khác hỗ trợ định dạng container khác © Aptech Ltd HTML5/ Audio Video Các định dạng audio Có ba định dạng file hỗ trợ cho phần tử HTML5 Bảng sau liệt kê định dạng tập tin âm hỗ trợ trình duyệt web: Trình duyệt hỗ trợ WAV Ogg Opera 10.6 No Yes Yes Apple Safari Yes Yes No Google Chrome Yes Yes Yes No Yes Yes Yes No FireFox 4.0 Internet Explorer © Aptech Ltd MP3 HTML5/ Audio Video No Các định dạng video Có ba định dạng file hỗ trợ cho phần tử HTML5 Bảng liệt kê định dạng tập tin video hỗ trợ trình duyệt web: Trình duyệt hỗ trợ WebM Ogg Opera 10.6 No Yes Yes Apple Safari Yes No No Google Chrome Yes Yes Yes No Yes Yes Yes No FireFox 4.0 Internet Explorer © Aptech Ltd MP4 HTML5/ Audio Video No Phần tử audio HTML5 Phần tử giúp nhà phát triển nhúng âm nhạc vào trang web Phần tử xác định tập tin âm sử dụng tài liệu HTML Thuộc tính src sử dụng để liên kết tập tin âm Mã số câu liên quan hiển thị nhúng tập tin âm trang web cách sử dụng thẻ audio element html5 audio not supported Audio formats frequently used are wav, ogg, and mp3 © Aptech Ltd HTML5/ Audio Video Các thuộc tính thẻ audio Thuộc tính cung cấp thông tin bổ sung cho trình duyệt từ khóa Một số thuộc tính dùng để kiểm soát giao diện chức khác Phần tử HTML5 có thuộc tính sau: Bảng liệt kê số thuộc tính thẻ Thuộc tính Mô tả autoplay Sử dụng thuộc tính với giá trị true muốn audio tự động play sau tải vào trình duyệt autobuffer Sử dụng thuộc tính muốn tự động tạo đệm bắt đầu controls Thuộc tính xác định audio có hay không diện trang Nếu có, diện với tính điều khiển âm chẳng hạn nút resume, pause, play, volume loop Sử dụng thuộc tính muốn audio sau kết thúc play tự động play lặp lại preload Thuộc tính xác định liệu âm nạp tải trang sẵn sàng để thực muted 10 © Aptech Ltd HTML5/ Audio Video Tạo tệp tin audio Thẻ sử dụng để play audio trình duyệt cũ Thẻ có hai thuộc tính, src autostart Thuộc tính src sử dụng để xác định nguồn âm thuộc tính autostart điều khiển audio xác định xem audio có nên play trang tải Đoạn code minh họa sử dụng thẻ phần tử Your browser does not support the audio element 11 © Aptech Ltd HTML5/ Audio Video Phần tử video HTML5 Phần tử tính thêm vào HTML5 Phần tử cho phép nhúng nội dung video trang web Nếu phần tử không hỗ trợ trình duyệt sau nội dung thẻ bắt đầu thẻ kết thúc hiển thị Thuộc tính src 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ử Your browser does not support the video 12 © Aptech Ltd HTML5/ Audio Video Các thuộc tính thẻ video Chi tiết kỹ thuật HTML5 cung cấp danh sách thuộc tính sử dụng với phần tử Bảng liệt kê số thuộc tính thẻ Các thuộc tính Mô tả autoplay Xác định trình duyệt bắt đầu chơi video sau sẵn sàng muted Cho phép để tắt tiếng video ban đầu, thuộc tính tồn controls Cho phép hiển thị điều khiển video, thuộc tính tồn loop Xác định trình duyệt nên lặp lại chơi video lần thuộc tính vòng lặp tồn chấp nhận giá trị boolean preload Xác định xem đoạn video nạp hay không trang tải 13 © Aptech Ltd HTML5/ Audio Video Chuẩn bị tải video Thuộc tính preload phần tử dùng để có nên tải buffering file video trang tải hay không Các giá trị thuộc tính preload: None – Trình duyệt không nên tải video trang tải Metadata – Trình duyệt nên tải metadata trang tải Auto - Trình duyệt nên tải toàn video trang tải 14 © Aptech Ltd HTML5/ Audio Video Ví dụ Your browser does not support the video Your browser does not support the video 15 © Aptech Ltd HTML5/ Audio Video Thiết lập kích thước video Người dùng xác định kích thước video thuộc tính width height phần tử Nếu thuộc tính này, trình duyệt thiết lập video với kích thước video Đoạn code minh họa sử dụng thuộc tính width height để xác định kích thước phần tử Video Size video{ background-color: black; border: medium double black; } Your browser does not support the video © Aptech Ltd 16 HTML5/ Audio Video Chuyển đổi tệp video Có nhiều vấn đề với nhà cung cấp trình duyệt để hỗ trợ định dạng video khác trang web Sau số định dạng video hỗ trợ trình duyệt : Ogg/Theora - mã nguồn mở quyền miễn phí Định dạng hỗ trợ trình duyệt Opera, Chrome, Firefox WebM - định dạng miễn phí quyền sáng chế miễn phí hỗ trợ Google Định dạng hỗ trợ trình duyệt Opera, Chrome, Firefox H.264/MP4 - hỗ trợ iPhone Google Android thiết bị Micro Video Controller - chuyển đổi tạo tất file mà người dùng đòi hỏi cho phần tử HTML5 hoạt động trình duyệt 17 © Aptech Ltd HTML5/ Audio Video Khả truy cập phần tử audio video 1-2 Các hãng toàn giới thuê người có kỹ khả đa dạng Họ người có khả hạn chế, bị khuyết tật , khiếm thị, nhận thức, khả di chuyển Khả tiếp cận(accessibility) mức độ sẵn sàng dễ dàng để số lượng lớn người dùng khác bao gồm người bị khuyết tật sử dụng máy tính Trong phát triển ứng dụng nhiều giả định xem xét số số chúng sau: Người dùng kiểm tra nội dung máy tính xách tay, điện thoại di động, máy tính bảng, máy tính để bàn Người dùng lắng nghe âm cách sử dụng tai nghe loa Người dùng hiểu ngôn ngữ phương tiện truyền thông phát tán Người sử dụng play thành công tải phương tiện truyền thông 18 © Aptech Ltd HTML5/ Audio Video Khả truy cập phần tử audio video 2-2 Những giả định đáp ứng yêu cầu đại đa số người dùng truy cập ứng dụng Nhưng tất người dùng thuộc vào nhóm Do tập hợp giả định xem xét cho người sử dụng sau: Người dùng nghe suy giảm thị lực đó, lắng nghe âm xem video Người dùng không quen thuộc với ngôn ngữ nội dung phát tán Người dùng sử dụng bàn phím trình đọc hình để truy cập nội dung Web Người dùng xem nghe nội dung truyền thông môi trường làm việc họ hạn chế thiết bị 19 © Aptech Ltd HTML5/ Audio Video Phần tử track 1-3 Phần tử track(theo dõi) cung cấp cách chuẩn, dễ dàng để thêm thích, phụ đề(subtitles), trình đọc hình mô tả cho phần tử Phần tử track sử dụng cho kiểu siêu liệu thời gian Nguồn liệu cho phần tử track dạng file văn tạo thành từ danh sách tín hiệu thời gian(timed cue) Cue trỏ trỏ vào thời điểm xác chiều dài đoạn video Các cue chứa liệu dạng giá trị phân cách dấu phẩy (CSV) JavaScript Object Notation(JSON) Phần tử track không hỗ trợ nhiều trình duyệt lớn có IE 10 Chrome 18 + 20 © Aptech Ltd HTML5/ Audio Video Phần tử track 2-3 Bảng sau liệt kê thuộc tính phần tử track Thuộc tính Mô tả src Chứa URL liệu track văn srclang Chứa ngôn ngữ liệu track văn kind Chứa loại nội dung mà định nghĩa track sử dụng default Chỉ điều track mặc định người dùng không xác định giá trị label Quy định cụ thể tiêu đề hiển thị cho người sử dụng 21 © Aptech Ltd HTML5/ Audio Video Phần tử track 3-3 Mã số câu liên quan trình bày cách phần tử track sử dụng kết hợp với phần tử cung cấp phụ đề Mã số câu liên quan trình bày cách phần tử track sử dụng kết hợp với phần tử cung cấp phụ đề ngôn ngữ khác 22 © Aptech Ltd HTML5/ Audio Video Tổng kết Đa phương tiện kết hợp phần tử khác video, đồ họa, âm văn Có nhiều loại phương tiện truyền thông khác sử dụng cho âm tập tin video trang web khác Các phần tử giúp nhà phát triển nhạc nhúng trang web cho phép người dùng nghe nhạc Người dùng chơi âm trình duyệt cũ cách sử dụng thẻ Các phần tử sử dụng để nhúng nội dung video trang web Thuộc tính preload xác định liệu âm phải tải tải trang sẵn sàng để thực thi WebM mã nguồn mở định dạng container video hỗ trợ Google 23 © Aptech Ltd HTML5/ Audio Video Khả truy cập phần tử audio video Hỗ trợ Audio Firefox - Đưa điều khiển với API accessibility, nhiên điều khiển riêng biệt không tương tác với bàn phím Truy cập vào bàn phím cung cấp phím tắt cụ thể Firefox Opera - Chỉ hỗ trợ bàn phím E - Đưa điều khiển với API tiếp cận, nhiên điều khiển riêng không tương tác với bàn phím Hỗ trợ Video Firefox - tương tác với điều khiển riêng Opera - Chỉ hỗ trợ bàn phím IE - Không cho phép điều khiển riêng để tương tác với bàn phím 24 © Aptech Ltd HTML5/ Audio Video [...]... Your browser does not support the audio element < /audio> 11 © Aptech Ltd HTML5/ Audio và Video Phần tử video trong HTML5 Phần tử là một tính năng mới được thêm vào trong HTML5 Phần tử cho phép nhúng nội dung video trên các trang web Nếu phần tử không... not support the video < /video> 15 © Aptech Ltd HTML5/ Audio và Video 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ử 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ử 12 © Aptech Ltd HTML5/ Audio và Video Các thuộc tính của thẻ video Chi tiết kỹ thuật HTML5 cung cấp một danh sách các thuộc tính có thể được sử dụng với các phần tử ... H.264/MP4 - được hỗ trợ trên iPhone và Google Android thiết bị Micro Video Controller - chuyển đổi tạo ra tất cả các file mà người dùng đòi hỏi cho phần tử HTML5 hoạt động trên trình duyệt 17 © Aptech Ltd HTML5/ Audio và Video 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ế,... với các phần tử cung cấp phụ đề bằng ngôn ngữ khác < /video> 22 © Aptech Ltd HTML5/ Audio và Video 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ó... 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 23 © Aptech Ltd HTML5/ Audio và Video Khả năng truy cập các phần tử audio và video Hỗ trợ Audio Firefox - Đưa ra các điều khiển với API accessibility, tuy nhiên điều khiển riêng biệt không tương tác với bàn phím Truy cập vào bàn phím được cung cấp bởi các phím tắt cụ thể Firefox Opera - Chỉ... người sử dụng 21 © Aptech Ltd HTML5/ Audio và Video Phần tử track 3-3 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ử cung cấp phụ đề < /video> Mã số câu liên quan... Video Size video{ background-color: black; border: medium double black; } Your browser does not support the video < /video> © Aptech Ltd 16 HTML5/ Audio và Video 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. .. thành công và tải phương tiện truyền thông 18 © Aptech Ltd HTML5/ Audio và Video 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: Người dùng đã nghe và suy giảm thị lực và do đó,... 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 14 © Aptech Ltd HTML5/ Audio và Video Ví dụ Your browser does not support the video < /video> ... phụ thuộc vào Flash để truy cập audio video © Aptech Ltd HTML5/ Audio Video Các kiểu audio video hỗ trợ Bảng liệt kê định dạng audio video phổ biến: Có nhiều loại giải mã (codec) video audio khác... src="sampaudio.ogg" type= "audio/ ogg" /> Your browser does not support the audio element < /audio> 11 © Aptech Ltd HTML5/ Audio Video Phần tử video HTML5 Phần tử ...NexTGen Web Bài 11: Audio Video HTML5 Mục tiêu Mô tả cần thiết đa phương tiện HTML5 Liệt kê loại đa phương tiện hỗ trợ HTML5 Giải thích phần tử audio HTML5 Giải thích phần tử video HTML5