Nhúng một đối tượng bất kỳ vào trang web với HTML

Có thể chúng ta đã biết cách trình bày văn bản với đủ các định dạng với HTML5. Từ gạch chân, gạch ngang, in đậm, in nghiêng với đủ thể loại màu sắc. Tuy nhiên với HTML đó chưa phải là tất cả. Trong tutorial này, chúng ta sẽ cùng tìm hiểu cách nhúng một đối tượng bất kỳ vào trong trang web. Hay có thể hiểu đơn giản là chèn một thành phần đa phương tiện (hình ảnh, audio, video, flash, pdf, java applet,…) vào trong website với HTML5.

Nhúng một đối tượng với thẻ object

Hiển thị hình ảnh

Xem thử ví dụ khi chèn hình ảnh với thẻ này:

<object data=”img/doraemon.jpg” type=”image/jpg” awidth=”300″ height=”150″> Doraemon <object>

Với cú pháp như trên, chúng ta thấy rõ ràng, để hiện thị hình ảnh thì chúng ta cần phải khai báo 2 thuộc tính là:
data: đường dẫn trỏ tới hình ảnh muốn hiển thị ta sử dụng hình ảnh.
type: kiểu của loại hình ảnh đó, ở đây sẽ là image/jpg (ảnh có đuôi là jpg. Nếu sử dụng ảnh dạng png thì ta sẽ có giá trị là image/png. Các bạn có thể tìm kiếm với keyword image mime types để tìm hiểu thêm các kiểu định dạng khác.

Trong thẻ object này chúng ta có sử dụng content là “Doraemon”, nội dung này tương đương với thuộc tính alt của thẻ img giúp chúng ta hiển thị phần văn bản mô tả để đề phòng trường hợp ảnh không thể hoặc không kịp hiển thị và điều này được tổ chức W3C khuyến khích.

Để hiển thị hình ảnh bằng thẻ object quả thật rất rắc rối, phức tạp. Chính vì vậy, W3C khuyến khích chúng ta nên sử dụng thẻ img để hiển thị hình ảnh.

Hiển thị video

Thế còn đối với video thì sao? Hãy xem tiếp ví dụ sau:

<object data=”videos/my_birthday.mp4″ awidth=”800″ height=”600″>
<param name=”quality” value=”high” />
<param name=”autoplay” value=”true” />
</object>

Ngoài các giá trị đã được giải thích chúng ta còn có các giá trị khác như là:
awidth và height để điều chỉnh kích thước hiển thị video. Thẻ param nhằm để định nghĩa các tham số với cặp thuộc tính name và value tương ứng với tên tham số và giá trị của tham số đó. Ở đây ý nghĩa của hai thẻ param là phát video với chất lượng cao và tự động play video khi trang web được tải.

Lưu ý: đối với tham số autoplay, nó chỉ hoạt động tốt trên trình duyệt Safari của hệ điều hành Mac. Còn đối với trình duyệt Chrome thì nó không có tác dụng vì thẻ object này sẽ nhận được sự hỗ trợ khác nhau giữa các trình duyệt khác nhau. Vậy làm sao để khắc phục vấn đề này?

Nhúng một đối tượng với thẻ embed

Thông qua mục đầu tiên của tutorial chúng ta đã thấy rõ độ phức tạp cũng như sự hỗ trợ khác nhau giữa các trình duyệt của thẻ object. Chính vì lý do này sẽ gây “bối rối” cho các nhà phát triển. Để khắc phục vấn đề mà thẻ object gặp phải , chúng ta sẽ tìm hiểu thẻ embed, với cùng mục đích và thực hiện các chức năng tương tự như thẻ object.

Hãy cùng xem ví dụ về thẻ này:

<embed src=”Videos/English.mp4″ awidth=”800″ height=”600″></embed>

Nhìn vào ví dụ này chắc không cần phải giải thích gì nhiều chúng ta vẫn có thể hiểu rõ được các thuộc tính của thẻ này đúng không? Rất đơn giản:
src: thiết lập đường dẫn đến file video
awidth và height: thiết lập kích thước của video trong trang web

Đặc biệt là nó không sử dụng các thẻ param như trong thẻ object để định nghĩa các tham số mà sử dụng trực tiếp như một thuộc tính.

Lưu ý: thẻ embed này chỉ có trong HTML5, với các version trước thì nó chỉ được thêm vào khi có một số trình duyệt không hỗ trợ thẻ object nhằm đảm bảo trang web vẫn chạy tốt video. Và nên nhớ đây là một thẻ rỗng (empty tag).

Kết luận

Vậy là các bạn lại được tìm hiểu cách để nhúng một đối tượng bất kỳ vào trang web thông qua việc tìm hiểu các thẻ mà HTML5 hỗ trợ, ở đây các ví dụ chỉ sử dụng các video là chính, dĩ nhiên là nó cho phép nhúng cả các đối tượng đa phương tiện vào trang web, phần này các bạn nên tự thực hành để có thể hiểu rõ hơn cũng như nhanh chóng nắm bắt được các vấn đề mà tutorial này đề cập đến.