Bao gồm ảnh & video

AMP không hỗ trợ việc sử dụng các thẻ HTML mặc định tương ứng để hiển thị nội dung đa phương tiện, ví dụ như <img>. Chúng tôi cung cấp các thành phần tương đương vì lý do sau:

• Chúng tôi cần hiểu bố cục của trang trước khi tải tài sản, vốn là thiết yếu để hỗ trợ tải trước cho màn hiển thị đầu tiên
• Chúng tôi cần kiểm soát các yêu cầu mạng để tải lười và ưu tiên tài nguyên một cách hiệu quả

Thận trọng: Tuy không được hỗ trợ, nhưng chúng vẫn sẽ được render; tuy nhiên, AMP sẽ không xác thực cho các trang của bạn và bạn sẽ không nhận được tất cả lợi ích mà AMP mang lại.

Ảnh

Bao gồm một ảnh trong trang của bạn sử dụng yếu tố amp-img, ví dụ như:

<amp-img
  alt="A beautiful sunset"
  src="/static/inline-examples/images/sunset.jpg"
  width="264"
  height="195"
>
</amp-img>

Trong ví dụ cơ bản nhất này, ảnh sẽ hiển thị với chiều cao và chiều rộng cố định. Tối thiểu là một chiều rộng và chiều cao cụ thể phải được quy định.

Hiển thị ảnh khi JavaScript bị vô hiệu

Bởi <amp-img> phụ thuộc vào JavaScript, nếu người dùng chọn vô hiệu kịch bản, các ảnh sẽ không được hiển thị. Trong trường hợp này, bạn cần cung cấp một phương án dự phòng cho ảnh sử dụng <img> và <noscript>, ví dụ như:

<amp-img
  src="/static/inline-examples/images/sunset.jpg"
  width="264"
  height="195"
>
  <noscript>
    <img
      src="/static/inline-examples/images/sunset.jpg"
      width="264"
      height="195"
    />
  </noscript>
</amp-img>

Bố cục nâng cao

AMP cho phép bạn tạo các trang tương thích hoàn toàn một cách dễ dàng hơn so với sử dụng CSS/HTML tiêu chuẩn. Ở dạng cơ bản nhất, tất cả những gì bạn cần làm là bổ sung layout="responsive":

<amp-img
  alt="A view of the sea"
  src="/static/inline-examples/images/sea.jpg"
  width="900"
  height="675"
  layout="responsive"
>
</amp-img>

Hành vi và mã giữ chỗ

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

Ảnh hoạt họa

Yếu tố amp-anim rất giống với yếu tố amp-img và cung cấp các chức năng bổ sung để quản lý việc tải và phát các ảnh hoạt họa 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>

Video

Bao gồm một video trong trang của bạn sử dụng yếu tố amp-video.

Chỉ sử dụng yếu tố này để nhúng trực tiếp tập tin video HTML5. Yếu tố này tải tài nguyên video như được quy định bởi thuộc tính src theo nguyên tắc tải lười, tại thời điểm quy định bởi AMP.

Bao gồm một mã giữ chỗ trước khi video bắt đầu, cùng một phương án dự phòng 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>

Âm thanh

Bao gồm tài nguyên âm thanh trong trang của bạn sử dụng yếu tố amp-audio.

Chỉ sử dụng yếu tố này để nhúng trực tiếp tập tin âm thanh HTML5. Cũng như mọi tài nguyên bên ngoài được nhúng vào một trang AMP, yếu tố này tải tài nguyên âm thanh như được quy định bởi thuộc tính src theo nguyên tắc tải lười, tại thời điểm quy định bởi AMP.

Bao gồm dự phòng, 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>