Nội dung bài viết
STDIO Âm thanh, hình ảnh, audio làm cho trang web của chúng ta thêm đẹp đẽ, sống động hơn. Những thành phần này được thể hiện bằng HTML như thế nào thì trong bài viết này tôi sẽ cùng các bạn khám phá và sử dụng những thẻ để thể hiện những thành phần hình ảnh, audio, video trong trang web.

Giới thiệu

Âm thanh, hình ảnh, audio làm cho trang web của chúng ta thêm đẹp đẽ, sống động hơn. Những thành phần này được thể hiện bằng HTML như thế nào thì trong bài viết này tôi sẽ cùng các bạn khám phá và sử dụng những thẻ để thể hiện những thành phần hình ảnh, audio, video trong trang web.

Tiền đề bài viết

Bài viết nằm trong CHƯƠNG TRÌNH TỰ HỌC HTML của stdio.vn do tác giả Nguyễn Nghĩa biên soạn.

Đối tượng hướng đến

Lập trình viên mới bắt đầu lập trình web cơ bản với HTML và đã xem qua các bài viết trước trong chuỗi bài viết về HTML.

Thẻ hình ảnh

Trong HTML, hình ảnh được định nghĩa bởi thẻ <img> có cấu trúc như sau:

<img src="url" alt="some text" >

Thuộc tính url xác định đường dẫn tới một hình ảnh và thuộc tính alt là xác định một đoạn text khi hình ảnh không được hiển thị.

Ngoài ra các bạn có thể thêm thuộc tính height width để xác định khích thước cho một hình ảnh.

Ví dụ hiển thị logo của stdio.vn với height 100 và width 200:

<!DOCTYPE html>
<html>
	<head>
		<title>HTML - Phần 5: Các Thẻ Hình Ảnh, Video, Audio</title>
	</head>
	<body>
		<h3>Logo Stdio.vn</h3>
		<img src="http://www.stdio.vn/statics/shared/img_logo.png" alt="Đường dẫn không tồn tại" height="100" width="200" >
	</body>
</html>

Kết quả

ss_1

Lưu ý: Thẻ img không có thể đóng. Tuy nhiên các bạn dùng <img /> vẫn cho kết quả đúng.

Thẻ audio

Trước khi HTML5 ra đời để chơi video hay audio chúng ta phải sử dụng plug-in như flash. HTML5 ra đời hỗ trợ cho chúng ta chơi audio, video một cách thật tuyệt vời sử dụng thẻ <audio><video>.

Để chơi audio ta sử dụng thẻ audio với cấu trúc như sau:

<audio controls>
  <source src="url" type="media type">
Nội dung hiển thị nếu trình duyệt không hỗ trợ thẻ audio
</audio>

Thuộc tính controls xác định các control chúng ta dùng để chơi nhạc như play, pause, volume.

Thẻ Souce chứa thông tin về file nhạc mà chúng ta muốn chơi với các thuộc tính laf

url: xác định đường dẫn tới file audio.

type: kiểu audio phụ thuộc và các định dạng tương ứng.

HTML5 chỉ hỗ trợ audio có định dạng MP3, WAV, and Ogg với các media type như sau:

Audio Format Media Type
MP3     audio/mpeg
Ogg   audio/ogg
Wav   audio/wav

Ví dụ chơi audio sử dung thẻ <audio>:

<!DOCTYPE html>
<html>
	<head>
		<title>HTML - Phần 5: Các Thẻ Hình Ảnh, Video, Audio</title>
	</head>
	<body>
		<h3>Play Audio Demo</h3>
		<audio controls>
			<source src="audio_demo.mp3" type="audio/mpeg" />
		Trình duyệt không hỗ trợ thẻ audio
		</audio>
	</body>
</html>

Kết quả sau khi chạy với trình duyệt

ss_2

Có thể thêm thuộc tính autoplay của thẻ audio để audio tự play sau khi tài liệu được load.

<audio controls autoplay>
			<source src="audio_demo.mp3" type="audio/mpeg" />
		Trình duyệt không hỗ trợ thẻ audio
		</audio>

Thẻ video

Tương tự thẻ audio, chúng ta sử dụng thẻ <video> để chơi video với cấu trúc như sau:

<video controls height="value" width="value">
  <source src="url" type="media type">
Nội dung hiển thị nếu trình duyệt không hổ trợ thẻ video
</video>

Các giá thuộc tính cũng giống như đối với thẻ audio nhưng media type có phần khác biệt. Chi tiết được cho ở bảng dưới đây.

File Format Media Type
MP4     video/mp4
WebM    video/webm
Ogg   video/ogg

Ví dụ chơi một video

<!DOCTYPE html>
<html>
	<head>
		<title>HTML - Phần 5: Các Thẻ Hình Ảnh, Video, Audio</title>
	</head>
	<body>
		<h3>Play Video Demo</h3>
		<video controls autoplay height="400" width="600">
			<source src="video_demo.mp4" type="video/mp4" />
		Trình duyệt không hỗ trợ thẻ video
		</video>
	</body>
</html>

Kết quả

ss_3

Ngoài ra các bạn có thể tham khảo thêm bài viết Hướng Dẫn Nhúng Một Clip Youtube Vào Trang Web HTML của tác giả Mido Lê để biết thêm một cách play video khác.

 

THẢO LUẬN
ĐÓNG