Cách chèn media nhạc và video trong html

Cách chèn media nhạc và video trong
html [bài 5]
Người đăng: Chiến Thần - Ngày: 25/12/2016

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ẻ <video>.
Cách chèn một video trong HTML:
Để chèn video trong html, bạn sẽ chèn như sau:
<video width="" height="" controls>
<source src="URL" type="kiểu định dạng 1">
Trình duyệt của bạn không hỗ trợ thẻ video
</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ụ:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Trình duyệt của bạn không hỗ trợ thẻ video
</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ẻ <video> có thể có nhiều hơn một thẻ <source> và các thuộc tính trong thẻ <source> 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ụ:
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Trình duyệt của bạn không hỗ trợ thẻ video
</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ẻ <audio> 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ẻ <audio> với cách sau:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Trình duyệt của bạn không hỗ trợ thẻ audio
</audio>
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ẻ <audio> tương đồng với
thẻ <video> và tất nhiên cách dùng của chúng là tương tự nhau bạn nhé.
Thẻ <audio> cũng có thuộc tính autoplay giống như video vậy.
<audio autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Trình duyệt của bạn không hỗ trợ thẻ audio
</audio>
Xem demo

3. Chèn các đối tượng kỹ thuật số với thẻ:
<object>, <embed>
Ngoài các thẻ đặc trưng cho từng loại tập tin ở trên thì bạn còn có một cách khác để chèn các đối tượng
kỹ thuật số vào tài liệu HTML đó là dùng thẻ <object>, <embed>, đây là các thẻ có thể giúp bạn
chèn các loại đối tượng kỹ thuật số như Flash, Java, Audio, Video, PDF, ActiveX.
Cách chèn các đối tượng kỹ thuật số với vẻ <object>
Bạn có thể chèn các đối tượng kỹ thuật số với thẻ <object> bằng cú pháp sau:
<object width="" height="" data="URL"></object>
Ví dụ:
<object width="400" height="50" data="bookmark.swf"></object>
Xem demo
Ngoài ra bạn cũng có thể dùng thẻ này để chèn một file HTML hay một hình ảnh:
Ví dụ:
<object width="100%" height="500px" data="snippet.html"></object>
Xem demo

Các thuộc tính của thẻ <object>
Ngoài thuộc tính chung của html, thẻ <object> có khá nhiều thuộc tính. Mình xin giới thiệu một vài
thuộc tính cơ bản đến các bạn.

•

width & height: Độ rộng và độ cao của đối tượng.

•

type: Kiểu định dạng của file media (media_type)

•

data: URL. Thuộc tính này tương tự như thuộc tính src mà các bạn đã tiếp xúc, nó chỉ định url
của đối tượng được sử dụng.

•

name: Tên của đối tượng

•

usemap: Tương tự như usemap của thẻ

Ngoài việc sử dụng thẻ <object> bạn còn một cách khác để chèn các đối tượng kỹ thuật số là sử dụng
thẻ <embed>. Cách dùng của thẻ này tương tự như với thẻ <object> mà mình đã giới thiệu
Để chèn đối tượng kỹ thuật số bạn sử dụng cách sau:
<embed width="" height="" src="URL">
Ví dụ:
<embed width="400" height="50" src="bookmark.swf">
Xem demo

Ngoài các thuộc tính chung của thẻ html, thẻ có các thuộc tính đặc trưng riêng đó là width, height, src và
type. Các thuộc tính này đã quá quen thuộc với bạn rồi phải không?

4. Chèn video từ youTube
Việc chèn video từ youTube của các website đã trở thành việc khá phổ biến hiện nay. Bạn có thể chèn
video từ youtube bằng các sử dụng một trong các thẻ <iframe>, <object> và <embed>.
Thẻ<object> và <embed> mình đã giới thiệu với bạn ở các phần trên, nên ở phần này mình xin giới
thiệu với bạn cách sử dụng thẻ iframe để chèn video nhé.
Youtube video id
Để chèn video từ youtube bạn cần phải có id của video ví dụ như: XGSy3_Czz8k. Video id bạn có thể lấy
được khi bạn lưu video hoặc play video trên youtube.
Sau khi đã có video id bạn có thể chèn video bằng cách sau: