Làm việc với multimedia

Multimedia hay còn gọi là đa phương tiện. Thuật ngữ này được sử dụng tương phản với media, chỉ bao gồm các kiểu nội dung truyền thống là in ấn hoặc viết tay.

Hình ảnh

Khi mới ra đời, web chỉ hỗ trợ mỗi văn bản, điều này làm trang web trở nên khá tẻ nhat. May mắn thay, một thời gian sau đó, chúng ta đã có thể thêm hình ảnh vào trang web. Sau nữa, chúng ta còn có thể sử dụng hình ảnh như background. Lúc này, những trang web của chúng ta trở nên thật lộng lẫy.

Nhưng trước hết, chúng ta hãy làm việc với tag img để nhúng 1 tấm hình vào trang web của mình trước đã nha.

Trong những bài trước, mình đã có đề cập đến tag img. Đây là một tag rỗng (empty tag), nghĩa là nó chỉ bao gồm tag mở mà không có nội dung và tag đóng. Mỗi tag img có 2 thuộc tính quan trọng chúng ta cần quan tâm:

  • src: thuộc tính mô tả đường dẫn đến file ảnh. Có thể là đường trên tương đối, tuyệt đối hoặc 1 url
  • alt: thuộc tính chứa nội dung, sẽ được trang web hiển thị, khi file ảnh không tìm thấy học không load được

Ví dụ: chúng ta có một folder

Để nhúng hình ảnh vào file index.html chúng ta sẽ có đoạn mã

Khi đường dẫn chính xác và file ảnh tồn tại. Hình ảnh sẽ được hiển thị trên trang web của bạn. Bạn có thể xem chi tiết tại đây.

Hoặc khi đường dẫn không chính xác, file ảnh bị lỗi, không thể liên kết được. Giá trị của thuộc tính alt sẽ được hiển thị. Đảm bảo về mặt ngữ nghĩa cho trang web của bạn. Ở ví dụ này, mình cố tình làm sai đường dẫn, bạn có thể thấy thay vì hình ảnh hiện lên, đoạn mô tả sẽ xuất hiện.

Video và Audio

Cả video và web đều không được xuất hiện trên web từ bạn đầu. Vì sao ư? bạn có nhớ WWW và HTML ra đời năm nào không? Vào thời điểm đó, chúng ta chưa có ADSL, chưa có cáp quang, công nghệ 3G hay 4G như bây giờ. Tốc độ mạng rất ỳ ạch, còn bằng thông thì đắt đỏ.

Đến những năm 2000, nhờ những bước nhảy vọt của hạ tầng internet. Chúng ta đã có thể trải nghiệm internet tốc độ cao. Tuy nhiên, HTML vẫn chưa phát triển kịp để cho phép lập trình viên nhúng các file video và audio vào trang web một cách trực tiếp. Để làm việc đó, lập trình viên cần sử dụng các plugin như Flash (sau đó là Silverlight). Các plugin này thực hiện khá tốt nhiệm vụ của chúng. Song song với đó, vẫn có những bất cập như: vấn đề tương thích với tính năng của HTML, vấn đề về bảo mật…vv

Và may mắn cho chúng ta. Được sinh ra và lớn lên trong kỉ nguyên số. Các bạn được sử dụng internet tốc độ cao. HTML5 đã ổn định với nhiều chức năng mới. Một trong số đó là nhúng các file audio và video.

Hai tags này có cấu trúc và cách sử dụng tương đối giống nhau. Vậy mình sẽ giới thiệu tag audio và bạn sẽ làm tương tự với video nhé.

Phần tử audio bao gồm một số phần tử con:

  • Các phần tử source dẫn đến file audio, và được đặc tả định dạng.
  • Một phần tử p dùng dể dự phòng khi trình duyệt không hỗ trợ html5.

Bạn có thể xem kết quả của đoạn mã trên tại đây.

Bạn có thể tra cứu thêm:

  • Tag video – thuộc tính và các loại file hỗ trợ
  • Tag audio – thuộc tính và các loại file hỗ trợ.

iFrame

Tag iframe có một lịch sử hình thành và phát triển khá phong phú. Vì nhiều yếu tố như hạ tầng mạng, phong cách thiết kế web…vv Nhưng quan trọng nhất là rất khó để giải thích một cách rõ ràng cho các bạn iframe là gì. Vậy chúng ta cùng nhau làm một vài ví dụ nhỏ nhé.

Ví dụ 1: YOUTUBE

Bước 1: Bạn vào youtube chọn 1 video mình ưa thích.

Bước 2: Ở phía dưới video, có một thanh công cụ phía bên trái. Các bạn click vào button ‘chia sẻ’. Sẽ có một popup hiện lên.

Bước 3: Ở popup chia sẻ, các bạn chọn option ‘Nhúng’.

Bước 4: Sau khi chọn option nhúng, một đoạn mã HTML hiện lên. Các bạn copy/paste đoạn mã này vào file html của mình. Sau đó mở file html lên nha.

Đây là kết quả của mình. Quả là vi diệu đúng không nào? Chúng ta đang xem ‘youtube’ trên trang web của mình.

Ví dụ 2: Google Map

Bước 1: Bạn truy cập vào Google map.

Bước 2: Nhập địa chỉ nhà bạn. Kiểm tra xem Google Map có thể tìm thấy không nha.

Bước 3: Khi kết quả đúng với thông tin bạn tìm kiếm. Nhìn bên tay trái phần thông tin về địa điểm các bạn sẽ thấy có chức năng chia sẻ.

Bước 4: Ở popup chia sẻ, chúng ta sẽ chọn tab ‘Nhúng bản đồ’. Khi đã chuyển qua tab nhúng bản đổ. Chúng ta tiếp tục click vào button ‘SAO CHÉP HTML’.

Bước 5: Cuối cùng, chúng ta sẽ paste đoạn HTML vừa copy vào trong file html của mình.

Và đây là thành quả của mình.

Cách sử dụng và công dụng iframe

Như mình đã giới thiệu phía trên, iframe có một lịch sử hình thành và phát triển rất phong phú. Đến thời điểm hiện tại, chúng ta có thể làm được rất nhiều thứ với nó.

Qua các ví dụ, các bạn có thể nhúng một video, 1 đối tượng bất kỳ(dịch vụ google map, facebook fanpage..vv) hay đơn giản chỉ là một trang web khác.

Tag iframe là một tag có cấu trúc cơ bản của HTML. Dưới đây là một ví dụ cơ bản nhất của iframe.

Như bạn thấy, iframe có thuộc tính src là url dẫn đến đối tượng cần nhúng. Phần nội dung của tag sẽ dùng cho trường hợp trình duyệt không hỗ trợ, chúng ta sẽ dùng để báo với người dùng. Ngoài ra, sau nhiều lần thêm, sửa xóa các thuộc tính. Hiện nay, các thuộc tính thường được sử dụng với tag iframe bao gồm:

  • width
  • height
  • allow
  • allowfullscreen

Bây giờ bạn có thể nhìn kỹ những đoạn mã HTML mà ta đã copy/paste ở 2 ví dụ trên. Hãy thử chỉnh sửa thuộc tính width và height của chúng.

Đồ họa Vector

Sau một chặng đường dài phát triển. Đến nay trang web của chúng ta đã có nhiều bước nhảy vọt.

Các bạn có thể nhận thấy. Web phát triển theo xu hướng giảm bớt văn bản và tăng cường hình ảnh. Song song với đó, phần cứng ngày càng tốt. Đòi hỏi hình ảnh với chất lượng đồ họa cao.

Để thỏa mãn được những nhu cầu của người dùng. HTML đã tích hợp công nghệ đồ họa vector (vector graphic), giúp các lập trình viên xây dựng những hình ảnh chất lượng cao, nhưng dung lượng nhỏ. Có khả năng co giãn cao.

Như tên gọi, chúng ta có thể đoán ra được. Đồ họa vector sử dụng các thuật toán để vẽ các đa giác, tô màu …vv để xây dựng nên những hình ảnh. Do đó, file lưu trữ sẽ chứa các thuật toán thay vì các điểm ảnh, nên dung lượng sẽ thấp hơn. Ưu điểm khác của chúng là khả năng co giãn. Ngày nay, các bạn có thể dễ dàng bắt gặp các file ảnh có phần mở rộng là svg. Chúng ta cũng có thể sử dụng tag image để nhúng các ảnh này một cách bình thường.

Ví dụ: Đây là một hình ảnh svg

 

Hoặc các bạn có thể mở tấm hình này trực tiếp tại đây. Tấm hình sẽ có kích thước rất to phải không nào. Nhưng chất lượng thì không hề giảm. Và khi bạn sử dụng chức năng ‘view page source’. Bạn sẽ thấy một đoạn mã nguồn chứ không phải là dữ liệu dạng binary như những file ảnh png, jpg…

Và nếu các bạn có chút năng khiếu hội họa, màu sắc và tìm hiểu sâu hơn. Các bạn cũng có thể nhúng trực tiếp ảnh vector thông qua tag svg. Mình có 1 ví dụ nhỏ

Và đây là kết quả của mình.