Học HTML – Viết chương trình HTML đầu tiên [bài 2]
Học HTML- Các thẻ HTML định đạng văn bản [bài 3]
Học HTML Cách chèn hình ảnh trong html [bài 4]
Học HTML Cách chèn media: nhạc, video trong html [bài 5]
Học HTML Cách chèn định dạng kiểu bảng trong HTML [bài 6]
Học HTML Cách chèn media: nhạc, video trong html [bài 5]
Trang chủ
Học làm web
Học HTML
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: Trình duyệt của bạn không hỗ trợ thẻ video Đ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ụ: Trình duyệt của bạn không hỗ trợ thẻ video 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ụ: Trình duyệt của bạn không hỗ trợ thẻ video 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ẻ
![Học HTML Cách chèn media: nhạc, video trong html [bài 5]](https://s3.tech12h.com/sites/default/files/styles/inbody400/public/field/image/hml5.png)
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é.