HTML - Nhúng Multimedia

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng bước vào thế giới thú vị của việc nhúng multimedia vào HTML. Cuối cùng của bài hướng dẫn này, bạn sẽ có khả năng thêm video, audio và các yếu tố tương tác khác vào trang web của mình như một chuyên gia. Hãy bắt đầu nào!

Cú pháp

Trước khi chúng ta đi vào chi tiết, hãy hiểu cú pháp cơ bản để nhúng multimedia vào HTML. Chúng ta sẽ tập trung vào hai thẻ chính: <embed> và <object>.

Thẻ <embed>

Thẻ <embed> là một thẻ tự đóng, được sử dụng để nhúng nội dung bên ngoài vào tài liệu HTML. Dưới đây là cú pháp cơ bản:

<embed src="URL_cua_tap_tin" type="loai_media">

Thẻ <object>

Thẻ <object> linh hoạt hơn và cho phép nội dung dự phòng. Dưới đây là cấu trúc cơ bản của nó:

<object data="URL_cua_tap_tin" type="loai_media">
Nội dung dự phòng ở đây
</object>

Các thuộc tính của thẻ <embed>

Hãy xem xét kỹ hơn các thuộc tính bạn có thể sử dụng với thẻ <embed>:

Thuộc tính	Mô tả
src	Xác định URL của tệp bên ngoài để nhúng
type	Xác định loại MIME của nội dung nhúng
width	Đặt chiều rộng của nội dung nhúng
height	Đặt chiều cao của nội dung nhúng

Dưới đây là một ví dụ sử dụng các thuộc tính này:

<embed src="cute_cat_video.mp4" type="video/mp4" width="640" height="480">

Trong ví dụ này, chúng ta đang nhúng một video về mèo dễ thương (vì ai lại không yêu video về mèo?) với chiều rộng 640 pixel và chiều cao 480 pixel.

Các thuộc tính của thẻ <object>

Thẻ <object> có một số thuộc tính bổ sung làm cho nó linh hoạt hơn:

Thuộc tính	Mô tả
data	Xác định URL của tài nguyên để nhúng
type	Xác định loại MIME của nội dung nhúng
width	Đặt chiều rộng của đối tượng
height	Đặt chiều cao của đối tượng
name	Xác định tên cho đối tượng

Hãy xem một ví dụ:

<object data="awesome_presentation.pdf" type="application/pdf" width="800" height="600">
<p>Ồ! Trình duyệt của bạn không hỗ trợ PDF.
<a href="awesome_presentation.pdf">Nhấp vào đây để tải xuống tệp PDF.</a>
</p>
</object>

Trong ví dụ này, chúng ta đang nhúng một tệp PDF. Nếu trình duyệt không thể hiển thị nó, người dùng sẽ thấy một thông báo với liên kết tải xuống thay thế.

Ví dụ về Nhúng Multimedia trong HTML

Bây giờ chúng ta đã bao gồm các kiến thức cơ bản, hãy xem một số ví dụ thực tế về việc nhúng các loại multimedia khác nhau.

Nhúng một Video YouTube

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>

Mã này nhúng một video YouTube (bạn có thể nhận ra URL!). Thẻ <iframe> thường được sử dụng để nhúng nội dung từ các nguồn bên ngoài như YouTube.

Nhúng một Tệp Audio

<audio controls>
<source src="my_favorite_song.mp3" type="audio/mpeg">
Trình duyệt của bạn không hỗ trợ phần tử audio.
</audio>

Ví dụ này nhúng một player audio với các điều khiển. Thẻ <source> cho phép bạn chỉ định nhiều định dạng audio để tương thích tốt hơn với các trình duyệt.

Nhúng một Hoạt ảnh Flash

<object type="application/x-shockwave-flash" data="cool_animation.swf" width="300" height="200">
<param name="movie" value="cool_animation.swf">
<p>Xin lỗi, trình duyệt của bạn không hỗ trợ Flash.</p>
</object>

Mặc dù Flash đã lỗi thời, ví dụ này cho thấy cách bạn có thể nhúng một hoạt ảnh Flash sử dụng thẻ <object>.

So sánh giữa thẻ <object> và thẻ <embed>

Bây giờ, bạn có thể đang tự hỏi, "Khi nào nên sử dụng <embed> và khi nào nên sử dụng <object>?" Đó là một câu hỏi tuyệt vời! Hãy phân tích:

Tính năng	<embed>	<object>
Nội dung dự phòng	Không	Có
Hỗ trợ trình duyệt	Rộng hơn	Tốt
Tham số嵌套	Không	Có
Tự đóng	Có	Không
Đơn giản	Cao hơn	Thấp hơn

Thẻ <embed> đơn giản hơn và có hỗ trợ trình duyệt rộng hơn, làm cho nó là lựa chọn tốt cho các nhiệm vụ nhúng đơn giản. Tuy nhiên, thẻ <object> cung cấp nhiều tính năng linh hoạt hơn, đặc biệt khi bạn cần cung cấp nội dung dự phòng hoặc tham số嵌套.

Trong thực tế, lựa chọn thường phụ thuộc vào loại media bạn đang nhúng và trình duyệt của đối tượng mục tiêu. Khi nghi ngờ, điều tốt nhất là thử cả hai tùy chọn và xem哪一个最适合 cho trường hợp cụ thể của bạn.

Nhớ rằng, thế giới phát triển web luôn thay đổi. Mặc dù các thẻ này vẫn được sử dụng rộng rãi và hỗ trợ, các kỹ thuật mới như sử dụng thẻ <video> và <audio> cho nội dung media đang trở nên phổ biến hơn.

Khi chúng ta kết thúc bài hướng dẫn này, tôi hy vọng bạn cảm thấy phấn khích về khả năng nhúng multimedia vào trang web của mình. Dù bạn đang thêm một bản nhạc nền vào blog cá nhân hay nhúng một video thông tin vào trang web của công ty, bạn现在已经 có công cụ để làm cho trang web của mình hấp dẫn và tương tác hơn.

Tiếp tục thực hành, giữ vững sự tò mò và đừng ngại thử nghiệm. Trước khi bạn nhận ra, bạn sẽ tạo ra những trải nghiệm web phong phú, multimedia đầy đủ làm cho khách truy cập của bạn ngạc nhiên. Chúc bạn may mắn với việc lập trình!

Credits: Image by storyset