HTML - Nhúng Đa phương tiện
Đôi khi bạn cần thêm nhạc hoặc video vào trang web của mình. Cách dễ nhất để thêm video hoặc âm thanh vào trang web của bạn là bao gồm thẻ HTML đặc biệt có tên<embed>. Thẻ này khiến trình duyệt tự bao gồm các điều khiển cho trình duyệt được cung cấp tự động đa phương tiện, hỗ trợ thẻ <embed> và loại phương tiện nhất định.
Bạn cũng có thể bao gồm một <noembed>cho các trình duyệt không nhận dạng được thẻ <embed>. Ví dụ: bạn có thể sử dụng <embed> để hiển thị một bộ phim bạn chọn và<noembed> để hiển thị một hình ảnh JPG nếu trình duyệt không hỗ trợ thẻ <embed>.
Thí dụ
Đây là một ví dụ đơn giản để phát một tệp midi được nhúng -
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src = "/html/yourfile.mid" width = "100%" height = "60" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
</embed>
</body>
</html>Thuộc tính thẻ <embed>
Sau đây là danh sách các thuộc tính quan trọng có thể được sử dụng với thẻ <embed>.
Note−Các thuộc tính căn chỉnh và tự khởi động không được dùng trong HTML5. Không sử dụng các thuộc tính này.
| Sr.No | Thuộc tính & Mô tả |
|---|---|
| 1 | align Xác định cách căn chỉnh đối tượng. Nó có thể được đặt ở giữa, trái hoặc phải . |
| 2 | autostart Thuộc tính boolean này cho biết liệu phương tiện có nên tự động khởi động hay không. Bạn có thể đặt nó đúng hoặc sai. |
| 3 | loop Chỉ định xem âm thanh có nên được phát liên tục (đặt vòng lặp thành true), một số lần nhất định (giá trị dương) hay không (sai) |
| 4 | playcount Chỉ định số lần phát âm thanh. Đây là tùy chọn thay thế cho vòng lặp nếu bạn đang sử dụng IE. |
| 5 | hidden Chỉ định xem đối tượng đa phương tiện có được hiển thị trên trang hay không. Giá trị sai có nghĩa là không và giá trị đúng có nghĩa là có. |
| 6 | width Chiều rộng của đối tượng tính bằng pixel |
| 7 | height Chiều cao của đối tượng tính bằng pixel |
| số 8 | name Tên được sử dụng để tham chiếu đối tượng. |
| 9 | src URL của đối tượng được nhúng. |
| 10 | volume Kiểm soát âm lượng của âm thanh. Có thể từ 0 (tắt) đến 100 (toàn bộ âm lượng). |
Các loại video được hỗ trợ
Bạn có thể sử dụng các loại phương tiện khác nhau như phim Flash (.swf), AVI (.avi) và các loại tệp MOV (.mov) bên trong thẻ nhúng.
.swf files - là các loại tệp được tạo bởi chương trình Flash của Macromedia.
.wmv files - là các loại tệp Video Media Window của Microsoft.
.mov files - là định dạng Phim thời gian nhanh của Apple.
.mpeg files - là các tệp phim được tạo bởi Nhóm Chuyên gia Hình ảnh Động.
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src = "/html/yourfile.swf" width = "200" height = "200" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
</embed>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Âm thanh nền
Bạn có thể sử dụng HTML <bgsound>để phát nhạc nền trong trang web của bạn. Thẻ này chỉ được hỗ trợ bởi Internet Explorer và hầu hết các trình duyệt khác đều bỏ qua thẻ này. Nó tải xuống và phát một tệp âm thanh khi tài liệu lưu trữ được người dùng tải xuống lần đầu tiên và hiển thị. Tệp âm thanh nền cũng sẽ phát lại bất cứ khi nào người dùng làm mới trình duyệt.
Note- Thẻ bgsound không được dùng nữa và nó sẽ bị xóa trong phiên bản HTML trong tương lai. Vì vậy, chúng không nên được sử dụng thay vào đó, bạn nên sử dụng âm thanh thẻ HTML5 để thêm âm thanh. Nhưng vẫn nhằm mục đích học tập, chương này sẽ giải thích chi tiết về thẻ bgsound.
Thẻ này chỉ có hai vòng lặp thuộc tính và src . Cả hai thuộc tính này đều có cùng ý nghĩa như đã giải thích ở trên.
Đây là một ví dụ đơn giản để phát một tệp midi nhỏ -
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<bgsound src = "/html/yourfile.mid">
<noembed><img src = "yourimage.gif" ></noembed>
</bgsound>
</body>
</html>Điều này sẽ tạo ra màn hình trống. Thẻ này không hiển thị bất kỳ thành phần nào và vẫn bị ẩn.
Internet Explorer cũng chỉ có thể xử lý ba tệp định dạng âm thanh khác nhau - wav, định dạng gốc dành cho PC; au, định dạng gốc cho hầu hết các máy trạm Unix; và MIDI, một chương trình mã hóa âm nhạc phổ quát.
Thẻ đối tượng HTML
HTML 4 giới thiệu <object>, cung cấp một giải pháp đa năng để đưa vào đối tượng chung. Các<object> phần tử cho phép các tác giả HTML chỉ định mọi thứ theo yêu cầu của một đối tượng cho bản trình bày của nó bởi tác nhân người dùng.
Dưới đây là một vài ví dụ -
Ví dụ 1
Bạn có thể nhúng tài liệu HTML vào chính tài liệu HTML như sau:
<object data = "data/test.htm" type = "text/html" width = "300" height = "200">
alt : <a href = "data/test.htm">test.htm</a>
</object>Ở đây thuộc tính alt sẽ xuất hiện nếu trình duyệt không hỗ trợ thẻ đối tượng .
Ví dụ - 2
Bạn có thể nhúng tài liệu PDF vào tài liệu HTML như sau:
<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">
alt : <a href = "data/test.pdf">test.htm</a>
</object>Ví dụ - 3
Bạn có thể chỉ định một số tham số liên quan đến tài liệu với <param>nhãn. Đây là một ví dụ để nhúng tệp wav -
<object data = "data/test.wav" type = "audio/x-wav" width = "200" height = "20">
<param name = "src" value = "data/test.wav">
<param name = "autoplay" value = "false">
<param name = "autoStart" value = "0">
alt : <a href = "data/test.wav">test.wav</a>
</object>Ví dụ - 4
Bạn có thể thêm một tài liệu flash như sau:
<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id = "penguin"
codebase = "someplace/swflash.cab" width = "200" height = "300">
<param name = "movie" value = "flash/penguin.swf" />
<param name = "quality" value = "high" />
<img src = "penguin.jpg" width = "200" height = "300" alt = "Penguin" />
</object>Ví dụ - 5
Bạn có thể thêm một applet java vào tài liệu HTML như sau:
<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93"
width = "200" height = "200">
<param name = "code" value = "applet.class">
</object>Các classidthuộc tính xác định phiên bản Trình cắm Java nào sẽ sử dụng. Bạn có thể sử dụng thuộc tính codebase tùy chọn để chỉ định nếu và cách tải xuống JRE.