Bài 11:
Audio và Video HTML5
NexTGen Web
Aptech Ltd.

Mục tiêu

 !"#$%&#

%'()*+ !"#$%!,-&,&#

./ 0&#

./ 0&#

./'1#&23 ) 0

./)#425&62%'#-&,7
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á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.
Để 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.
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.
8
Giới thiệu

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.
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.
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
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.
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.
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 là một thiết bị hoặc một chương trình được sử dụng để mã hóa và giải mã luồng(stream) dữ liệu kỹ
thuật số.
Codec là một thiết bị hoặc một chương trình được sử dụng để mã hóa và giải mã luồng(stream) dữ liệu kỹ
thuật số.

Các codec khác nhau có mức độ chất lượng nén khác nhau .
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.
Để 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.
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.
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ợ
Container Video Codec Audio Codec
Mp4 H.264 AAC
Ogg Theora Vorbis
WebM VP8 Vorbis

:#!5;2*%'()<+# =>?
Aptech Ltd.
@
Các định dạng audio

AB><+#C*!,-&,) 0<audio> &#7

:#*%'()<+#3 $;D!,-&,>E)&62%F>?
Trình duyệt hỗ trợ MP3 WAV Ogg
Opera 10.6 No Yes Yes
Apple Safari 5 Yes Yes No

Google Chrome 6 Yes Yes Yes
FireFox 4.0
No Yes Yes
Internet Explorer 9 Yes No No
Aptech Ltd.
G
Các định dạng video

AB><+#C*!,-&,) 0<video>&#7

:#!5;2*%'()<+#3 $!,-&,>E)&62%F>?
Trình duyệt hỗ trợ MP4 WebM Ogg
Opera 10.6 No Yes Yes
Apple Safari 5 Yes No No
Google Chrome 6 Yes Yes Yes
FireFox 4.0
No Yes Yes
Internet Explorer 9 Yes No No
Aptech Ltd.
Audio formats frequently used are wav, ogg, and mp3.
Audio formats frequently used are wav, ogg, and mp3.
H
Phần tử audio HTML5

I0<audio> #J ) )&KJ#;D+&#F>7

I0<audio>L)<3 $;D!,0M#&#)*%7

NOsrc!,0M#K*(')3 $;D7


PQ;*(4K<J#)3 $;D&#&#F>>R#)0M#S<audio>7
<!doctype html>
<html>
<head>
<title>audio element</title>
</head>
<body>
<audio src="d:\sourcecodes\audio.mp3"
controls autoplay loop>
html5 audio not supported
</audio>
</body>
</html>
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.
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.
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:
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
T
Các thuộc tính của thẻ audio

:#

!5;2*%'(DNQ)NOS<audio>7
Aptech Ltd.
Thẻ <embed> được sử dụng để có thể play audio trong các trình duyệt cũ.
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.
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 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.
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.

U+DV0M#SWD>X&# 0WX7
YZ
Tạo tệp tin audio
<audio autoplay loop controls="controls">
<source src="sampaudio.mp3" type="audio/mp3" />
<source src="sampaudio.ogg" type="audio/ogg" />
<embed src="sampaudio.mp3" />
Your browser does not support the
audio element.
</audio>
Aptech Ltd.

YY
Phần tử video trong HTML5

[ 0<video>'#!,-&,>E&62%BN##\
S>]S'J!,K<7

NOsrc!,0M#K*('3 $7

U+DV0M# 0<video>7
<video src="D:\Source codes\movie.mp4">
Your browser does not support the video.
</video>

I0<video> *DNO1#D5!,(D&#7

I0WX ^ J#N#&()&#F>7
Aptech Ltd.
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ử <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ử <video>.
Bảng dưới đây liệt kê một số các thuộc tính thẻ <video>.
Bảng dưới đây liệt kê một số các thuộc tính thẻ <video>.
Y
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ị boolean
preload Xác định xem các đoạn video sẽ được nạp hay không khi trang được tải
Aptech Ltd.
None – Trình duyệt không nên tải video trong khi trang đang được tải.
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.
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
Auto - Trình duyệt nên tải toàn bộ video trong khi trang đang được tải
Y8
Chuẩn bị tải video

NOpreload 0<video> !,_#K`&B(a>b&#

C*'
&##!,2'#7

A)#)&<NOpreload?
Aptech Ltd.
Y9
Ví dụ
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<video width="160" height="140" src="D:\Source Codes\movie.mp4" controls preload="none"
muted>
Your browser does not support the video.
</video>
<video width="160" height="140" src="D:\ Source Codes\movie.mp4" controls

preload="metadata" muted>
Your browser does not support the video.
</video>
</body>
</html>
Aptech Ltd.
Y
Thiết lập kích thước video

[#!c_#BKL)<'/!5>R#NOF# 0<video>7

[`&)NO2d&62%e*3 5'/!57

U+DV0M#NOF#KL)<'/!5 0<video>7
<!DOCTYPE HTML>
<html>
<head>
</head>
<title> Video Size</title>
<style>
video{
background-color: black;
border: medium double black;
}
</style>
<body>
<video src="D:\Source Codes\movie.mp4" controls preload="auto" width="360" height="340">
Your browser does not support the video.
</video>
</body>

</html>
Aptech Ltd.
Y@
Chuyển đổi các tệp video

ABfgf5)#g &62%K-&,)<+#')&(&#F>7

h;2*DNQ)<+#!,-&,>E)&62%?
Aptech Ltd.
YG
Khả năng truy cập các phần tử audio và video 1-2

A)P#&(#5#(\##!cB'i1#'1#+#7VBK*\##!cB'1#+
d><'23d'D<d3jd'1#2K'^D7

k1#$ 3l>*2m*DjNn#o#KQ*!,#*5#!c_#')>#pD\##!c><
'23BK0M#!,D)2O7

&#' )&KDNj#M#&gf#<e!,LDL^DNQ&#QJ#*!?
Aptech Ltd.
YH
Khả năng truy cập các phần tử audio và video 2-2

[\##<2) j#)2(+Q#!c_#&23 )j#M#7

[!#'# g#!c_#eNBD27

qBDN3 , )#<e!,LDL^#!c0M#B!?
Aptech Ltd.
YT

Phần tử track 1-3
Aptech Ltd.
Z
Phần tử track 2-3
Thuộc tính
Mô tả
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

:#*%'()NO 0&'
Aptech Ltd.
Y
Phần tử track 3-3

PQ;*(4&6>2)DN 0&'!,0M#', 5) 0WX#g 
Mf7
<video controls>
<source src="myvideo.mp4" type="video/mp4" />
<source src="myvideo.webm" type="video/webm" />
<track src="eng.vtt" label="English subtitles" kind="subtitles" srclang="en" >
</video>

PQ;*(4&6>2)DN 0&'!,0M#', 5) 0WX#g 
Mf>R###\')7
<video controls>
<source src="myvideo.mp4" type="video/mp4" />
<source src="myvideo.webm" type="video/webm" />

<track src="de.vtt" label="German subtitles" kind="subtitles" srclang="de" >
</video>
Aptech Ltd.

Tổng kết

U !"#$%*', ) 0')!dpVd;D1>7

ABf*+ !"#$%&2f#')!,0M#;D)3 $&()&#F>')
7

A) 0WXe#J ) )&K+J#&()&#F> ^ #!c_##+7

[#!c_#BK");D&#&62%r">R#)0M#SWD>X7

A) 0WX!,0M#KJ#N#&()&#F>7

NO &*L)<*%;D !,'&#n#K7

s>*DNDP#pDE<+#&D5!,-&,>E.#*7
Aptech Ltd.
8t&$h
Aptech Ltd.
9
Khả năng truy cập các phần tử audio và video

-&,

-&,