Nội dung hình ảnh và video trong trang amp

Giống như trên một trang HTML thông thường, AMP cho phép bạn nhúng nội dung hình ảnh, video và âm thanh vào trong trang AMP . Tuy nhiên để đưa được hình ảnh vào trong trang AMP mà không bị lỗi thì bạn buộc phải tuân thủ theo cấu trúc của trang AMP .

Tại sao không thể dùng cặp thẻ gốc của html như <img>, <video, <audio>?

AMP không hỗ trợ định dạng mặc định của html để hiển thị dữ liệu đa phương tiện (media). Thay vào đó AMP sẽ cung cấp thành phần tương đương thay thế cho thẻ <img> trên html mặc định vì những lý do sau:

Hiển thị hình ảnh cơ bản trên AMP

Nội dung của hình ảnh sẽ nằm trong cặp thẻ <amp-img> giống như ví dụ sau:

<amp-img alt="Bãi biển chiều ta"
  src="./images/bai-bien.jpg"
  width="450"
  height="300">
</amp-img>

Nhấn vào đây để xem ví dụ google.

Trong ví dụ cơ bản nhất này, hình ảnh sẽ hiển thị với chiều cao và chiều rộng cố định. Tối thiểu, chiều rộng và chiều cao cần được đặt mộ cách rõ ràng.

Hiển thị hình ảnh khi javascript bị tắt

Vì <amp-img> phụ thuộc vào JavaScript, nếu người dùng chọn tắt tập lệnh, hình ảnh sẽ không hiển thị. Trong trường hợp này, bạn nên cung cấp dự phòng cho hình ảnh bằng cách sử dụng <img> và <noscript>, như vậy:

<amp-img alt="Bãi biển chiều ta" 
src="./images/bai-bien.jpg"
  width="450"
  height="300">
  <noscript>
    <img src="./images/bai-bien.jpg" width="450" height="300" alt="Bãi biển chiều ta" />
  </noscript>
</amp-img>

Việc sử dụng thẻ <img> của html ở đây là hoàn toàn hợp lệ xem ví dụ tại đây

Hiển thị hình ảnh nâng cao (responsive cho các phiên bản kích thước màn hình khác nhau)

AMP làm cho nó dễ dàng hơn nhiều so với CSS / HTML cơ bản bằng cách tạo ra hình ảnh đáp ứng đầy đủ yêu cầu đó từ hình ảnh khai báo bạn đầu. Ở dạng cơ bản nhất, tất cả những gì bạn phải làm là thêm thuộc tính layout = “responsive” vào trong cặp thẻ <amp-img> như sau:

<amp-img alt="Bãi biển chiều ta" 
src="./images/bai-bien.jpg"
width="900"
height="675"
layout="responsive">
</amp-img>

Sau khi thêm thuộc tính layout = “responsive” vào thì hình ảnh của bạn sẽ luôn tràn đầy màn hình và co dãn tùy theo kích thước màn hình của thiết bị. Xem ví dụ tại đây.

Tối ưu tải dữ liệu với khai báo thuộc tính AMP giữ chỗ.

Trong thời gian chạy HTML AMP có thể quản lý hiệu quả tài nguyên hình ảnh, chọn trì hoãn hoặc ưu tiên tải tài nguyên dựa trên vị trí khung nhìn, tài nguyên hệ thống, băng thông kết nối hoặc các yếu tố khác.

Phần tử AMP giữ chỗ phải là phần tử con trực tiếp của phần tử AMP. Một phần tử được khai báo là giữ chỗ sẽ luôn điền vào bên trong phần tử AMP gốc trong trường hợp phần tử gốc không thể tải  hoặc tải chậm vì nhiều lý do (tài nguyên hệ thống, băng thông kết nối,….).

Xem thêm: https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/placeholders/?format=websites

Hình ảnh động (Animated images)

Phần tử amp-anim rất giống với phần tử amp-img và cung cấp chức năng bổ sung để quản lý việc tải và phát các hình ảnh động (hoạt hình) như GIF.

<amp-anim width="400"
height="300"
src="/static/inline-examples/images/wavepool.gif">
<amp-img placeholder
width="400"
height="300"
src="/static/inline-examples/images/wavepool.png">
</amp-img>
</amp-anim>

Xem ví dụ tại đây

Ở đây phần tử giữ chỗ của phần tử amp-anim là phần tử amp-img để phòng trường hợp không thể tải được hình ảnh wavepool.gif thì sẽ tải hình ảnh wavepool.png để hiển thị thay thế vào vị trí khung hình

LƯU Ý – Để có thể chạy được hình ảnh động (hoạt hình) bạn bắt buộc phải thêm thư viện <script async custom-Element = “amp-anim” src = “https://cdn.ampproject.org/v0/amp-anim-0.1.js”> </ script> trong phần đầu trang (Trong nội dung của cặp thẻ head).

Video

Để hiển thị video trên trang AMP thì bạn sử dụng cặp thẻ <amp-video> để thay thế cho cặp thẻ <video> trên html .

Chỉ sử dụng phần tử này để nhúng tệp video HTML5 trực tiếp. Phần tử tải tài nguyên video được chỉ định bởi thuộc tính src, tại một thời điểm được xác định bởi AMP.

Bao gồm một trình bằng thuộc tính poster trước khi video bắt đầu và fallback, nếu trình duyệt không hỗ trợ video HTML5, ví dụ:

<amp-video controls
width="640"
height="360"
src="/static/inline-examples/videos/kitten-playing.mp4"
poster="/static/inline-examples/images/kitten-playing.png">
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video

Xem ví dụ: tại đây

Audio

Nội dung audio trên trang AMP dùng cặp thẻ <amp-audio> để khai báo thay vì cặp thẻ <audio> trên html.

Sử dụng <amp-audio> để nhúng tệp âm thanh HTML5 trực tiếp. Giống như tất cả các tài nguyên bên ngoài được nhúng trong trang AMP, phần tử tải tài nguyên âm thanh được chỉ định bởi thuộc tính src, tại một thời điểm được xác định bởi AMP.

Bao gồm một khai báo source cho các loại âm thanh khác nhau khi bắt đầu và thuộc tính fallback nếu trình duyệt không hỗ trợ âm thanh HTML5, ví dụ:

<amp-audio width="400"
height="200"
src="/static/inline-examples/audio/cat-meow.mp3">
<div fallback>
<p>Your browser doesn’t support HTML5 audio.</p>
</div>
<source type="audio/mpeg"
src="/static/inline-examples/audio/cat-meow.mp3">
<source type="audio/ogg"
src="/static/inline-examples/audio/cat-meow.ogg">
</amp-audio>

Xem ví dụ: tại đây
Chú ý: – Để có thể sự dụng được âm thanh trên trang AMP thì bạn phải nhúng thư viện AMP JS:<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script> vào trong phần khai bái thẻ <head> của trang.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x