Chương 2-Bài 15. Các thẻ (tag) chèn các đối tượng đa phương tiện (audio, video) vào trang web

Chèn Âm thanh (audio) vào trang web

• Trong HTML5 đã hỗ trợ thẻ (tag) <audio></audio> giúp chúng ta chèn âm thanh vào trang web một cách dễ dàng.
• Hỗ trợ các định dạng âm thanh sau: .MP3 , .WAV, and .OGG

Các thuộc tính (attributes) hỗ trợ trong thẻ audio

Cách sử dụng thẻ (tag) audio

Cách 1: khai báo đơn giản

<audio src="Hannon-Jeremy_Black.mp3" loop="loop" autoplay controls></audio>

• loop="loop": yêu cầu file âm thanh tự động lặp đi lặp lại nhiều lần
• autoplay: yêu cầu tự động phát khi người dùng truy cập vào trang web
• controls: yêu cầu hiển thị thanh điều khiển với các nút Play, Pause, Stop, điều chỉnh âm lượng

Cách 2: khai báo chi tiết

<audio controls>
  <source src="duong_dan_den_tap_tin_am_thanh_dinh_dang.ogg" type="audio/ogg">
  <source src="duong_dan_den_tap_tin_am_thanh_dinh_dang.mp3" type="audio/mpeg">
  Trình duyệt (web browser) của bạn không hỗ trợ định dạng âm thanh này.
</audio>

• Tìm theo thứ tự ưu tiên từ trên xuống trong các thẻ <source /> được khai báo.
• Khi tìm được định dạng âm thanh nào mà trình duyệt (web browser) hỗ trợ -> sẽ hiển thị và phát âm thanh.
• Nếu tìm không thấy bất kỳ định dạng nào được hỗ trợ -> sẽ hiển thị dòng chữ Trình duyệt (web browser) của bạn không hỗ trợ định dạng âm thanh này.

Chèn video vào trang web

• Trong HTML5 đã hỗ trợ thẻ (tag) <video></video> giúp chúng ta chèn video vào trang web một cách dễ dàng.
• Hỗ trợ các định dạng âm thanh sau: .MP4 , .WebM, and .OGG
• Thẻ <video></video> này hoạt động tương tự thẻ <audio></audio> ở phía trên.

Các thuộc tính (attributes) hỗ trợ trong thẻ video

<video src="SampleVideo_1280x720_1mb.mp4" loop="loop" autoplay controls></video>

<video width="320px" height="240px" controls>
  <source src="duong_dan_den_tap_tin_video_dinh_dang.ogg" type="video/ogg">
  <source src="duong_dan_den_tap_tin_video_dinh_dang.mp3" type="video/mp4">
  Trình duyệt (web browser) của bạn không hỗ trợ định dạng video này.
</audio>