Học HTML Cách chèn media: nhạc, video trong html [bài 5]

Tiếp nối bài viết chèn hình ảnh trong html, đến bài viết này mình sẽ giới thiệu cho các bạn cách chèn các tập tin kỹ thuật số (media files) – đó chính là nhạc, phim ảnh (video, movie) và các hình ảnh động (animations). Với HTML chúng ta có thể dễ dàng chèn những loại tập tin này vào tài liệu và nó sẽ hiển thị rất sống động.

Vậy Media là gì? Media bao gồm rất nhiều định dạng khác nhau, ví dụ như hình ảnh (image), nhạc (music), âm thanh (sound), video, ghi âm (record), phim (film), hình ảnh động (animations),... Nó có thể là bất cứ điều gì bạn có thể nghe hoặc xem, và các website của chúng ta thường chứa các loại đa phương tiện với các định dạng khác nhau. Định dạng phổ biến của Video: MPEG (.mpg, .mpeg), AVI (.avi), WMN (.wmv), QuickTime (.mov), RealVideo (.rm, .ram), Flash (.swf, .flv), Ogg (.ogg), WebM (.webm), MPEG-4 hoặc MP4 (.mp4). Định dạng phổ biến của Audio: MIDI (.mid, .midi), RealAudio (.rm, .ram), WMA (.wma), AAC (.aac), Ogg (.ogg), MP3 (.mp3), MP4 (.mp4). Vậy là chúng ta có cái nhìn tổng quan về media, bây giờ chúng ta cùng tìm hiểu cách chèn chúng vào website nhé.

1. Chèn Video

Trước HTML5, một video chỉ có thể chạy được trên browser với sự hỗ trợ từ plug-in như flash. Tuy nhiên giờ đây bạn có thể dễ dàng chèn video vào website của bạn thông qua thẻ Cách chèn một video trong HTML: Để chèn video trong html, bạn sẽ chèn như sau: Đoạn text “Trình duyệt của bạn không hỗ trợ thẻ video” sẽ được hiển thị nếu browser của bạn không hỗ trợ HTML5. Ví dụ: Xem demo

Các thuộc tính của thẻ video:

Bất cứ một thẻ HTML đều có những thuộc tính chung, video cũng vậy. Ngoài ra video có các thuộc tính đặc trưng sau:

contrlos:

Thuộc tính controls này cho phép bạn điều khiển video ví dụ như chạy video, dừng video, thay đổi âm lượng…

width & height:

Độ rộng và độ cao của video

source:

Thẻ source cho phép bạn chỉ định các file video ở các định dạng khác nhau mà trình duyệt có thể chọn từ đó. Các trình duyệt thường sẽ chọn định dạng đầu tiên. Như vậy chúng ta có thể thấy trong một thẻ có thể có nhiều hơn một thẻ và các thuộc tính trong thẻ có lẽ không khó hiểu với bạn vì đã sử dụng mấy lần rồi phải không nào. autoplay: Tự động chạy video, điều đáng tiếc của thuộc tính này là nó không được hỗ trợ trên thiết bị iPad, iPhone. Ví dụ:

Xem demo Lưu ý: Một lưu ý nho nhỏ dành cho các bạn là để đảm bảo các video chạy trên tất cả trình duyệt, bạn nên chèn định dạng MP4.

2. Chèn Audio

Tương tự với video, để chèn âm thanh trong HTML chúng ta có thẻ và thẻ này cũng là một thẻ HTML5.

Cách chèn âm thanh trong HTML:

Để chèn âm thanh trong html bạn sẽ chèn bằng thẻ với cách sau: Xem demo

Các thuộc tính của thẻ audio:

Nhìn qua cách chèn âm thanh ở trên, bạn có thể thấy các thuộc tính của thẻ tương đồng với thẻ và tất nhiên cách dùng của chúng là tương tự nhau bạn nhé. Thẻ cũng có thuộc tính autoplay giống như video vậy. Xem demo