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ợ.
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 bả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ết bị chương trình sử dụng để mã hóa giải mã luồng(stream) liệu kỹ thuật số. Container Mp4 Video Codec H.264 Audio Codec AAC Các codec độ chất lượng nén khác . Vorbis Oggkhác có mứcTheora WebM VP8 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 nhau. © 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 No FireFox 4.0 © Aptech Ltd. MP3 Internet Explorer HTML5/ Audio Video 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 No FireFox 4.0 Internet Explorer © Aptech Ltd. MP4 HTML5/ Audio Video 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 thanh. 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 nhau. 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 © 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 thanh. 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. © Aptech Ltd. HTML5/ Audio Video 10 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. © Aptech Ltd. HTML5/ Audio Video 11 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 © Aptech Ltd. Xác định xem đoạn video nạp hay không trang tải HTML5/ Audio Video 12 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 © Aptech Ltd. HTML5/ Audio Video 13 Ví dụ . Your browser does not support the video. Your browser does not support the video. © Aptech Ltd. HTML5/ Audio Video 14 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. HTML5/ Audio Video 15 Chuyển đổi tệp video © Aptech Ltd. 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 : HTML5/ Audio Video 16 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 kém. 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. © Aptech Ltd. Trong phát triển ứng dụng nhiều giả định xem xét số số chúng sau: HTML5/ Audio Video 17 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 này. Do tập hợp giả định xem xét cho người sử dụng sau: © Aptech Ltd. HTML5/ Audio Video 18 Phần tử track 1-3 © Aptech Ltd. HTML5/ Audio Video 19 Phần tử track 2-3 Bảng sau liệt kê thuộc tính phần tử track Mô tả Thuộc tính © Aptech Ltd. 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 HTML5/ Audio Video 20 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. © Aptech Ltd. HTML5/ Audio Video 21 Tổng kết Đa phương tiện kết hợp phần tử khác video, đồ họa, âm văn bả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 nhau. 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. © Aptech Ltd. HTML5/ Audio Video 22 © Aptech Ltd. Introduction to the HTML5 / Session 23 Khả truy cập phần tử audio video Hỗ trợ Audio Hỗ trợ Video © Aptech Ltd. HTML5/ Audio Video 24 [...]... 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 © Aptech Ltd HTML5/ Audio và Video 22 © Aptech Ltd Introduction to the HTML5 / Session 2 23 Khả năng truy cập các phần tử audio và video Hỗ trợ Audio Hỗ trợ Video © Aptech Ltd HTML5/ Audio và Video 24 ... Ltd HTML5/ Audio và Video 15 Chuyển đổi các tệp video © Aptech Ltd 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 : HTML5/ Audio và Video 16 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... support the video < /video> © Aptech Ltd HTML5/ Audio và Video 11 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ử Bảng dưới đây liệt kê một số các thuộc tính thẻ 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,... với các phần tử cung cấp phụ đề bằng ngôn ngữ khác < /video> © Aptech Ltd HTML5/ Audio và Video 21 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ó... < /video> Your browser does not support the video < /video> © Aptech Ltd HTML5/ Audio và Video 14 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. ..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 đượ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ử . (codec) video và audio khác nhau được sử dụng để xử lý các tập tin video và audio. Có nhiều loại bộ giải mã (codec) video và audio khác nhau được sử dụng để xử lý các tập tin video và audio. Codec. < ;audio& gt; và < ;video& gt; để 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& gt; và < ;video& gt; để dễ dàng cho việc đưa vào website. không phải phụ thuộc vào Flash để truy cập audio và video Do vậy người dùng không phải phụ thuộc vào Flash để truy cập audio và video 9 Đa phương tiện trong HTML5 Aptech Ltd.