Nhúng đa phương tiện trong HTML

Đô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 trong HTML là sử dụng thẻ <embed>. Thẻ này khiến trình duyệt tự nhúng 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ể thêm thẻ <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>.

Ví dụ

Đây là một ví dụ đơn giản để phát tệp midi

<!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>

Các 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>.

Lưu ý: Các thuộc tính align và autostart không được dùng trong HTML5. Không sử dụng các thuộc tính này.

STT 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 ở center, left học right.

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ó true hoặc false.

3

loop

Chỉ định xem âm thanh có nên được phát liên tục (đặt loop thành true), một số lần nhất định (giá trị dương) hay không (false)

4

playcount

Chỉ định số lần phát âm thanh. Đây là tùy chọn thay thế cho loop 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ị false có nghĩa là không và giá trị true 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

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 nhiều 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.

  • Các tệp .swf: là các loại tệp được tạo bởi chương trình Flash của Macromedia.
  • Các tệp .wmv: là các loại tệp Video Media Window của Microsoft.
  • Các tệp .mov: là định dạng Quick Time Movie của Apple.
  • Các tệp .mpeg: là các tệp phim được tạo bởi Moving Pictures Expert Group.


<!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>

Thực thi sẽ hiển thị

<img src="yourimage.gif" alt="Alternative Media">


Âm thanh nền

Bạn có thể sử dụng thẻ HTML <bgsound> để phát nhạc nền trong nền trang web của mình. 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.

Lưu ý: 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, phần này sẽ giải thích chi tiết về thẻ bgsound.

Thẻ này chỉ có hai thuộc tính loop 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 toàn cầu.


Thẻ object HTML

HTML 4 giới thiệu phần tử <object>, phần tử này cung cấp giải pháp đa năng để đưa vào đối tượng chung. Phần tử <object> 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ẻ object.

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 bằng thẻ <param>. Đây là một ví dụ để nhúng một 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 java applet 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>

Thuộc tính classid xác định phiên bản Java Plugin nào sẽ sử dụng. Bạn có thể sử dụng thuộc tính codebase tùy chọn để chỉ định tải JRE như thế nào.