AMP

Menyertakan gambar & video

Seperti pada halaman HTML biasa, AMP memungkinkan Anda menyematkan konten gambar, video, dan audio. Pelajari apa yang berbeda tentang padanan AMP dan pelajari cara menyertakannya di halaman Anda.

Mengapa bukan <img>, <video>, dan <audio>?

AMP tidak mendukung pasangan HTML standar untuk menampilkan media, seperti <img>. Kita memberikan komponen dengan nilai yang setara karena alasan berikut ini:

Meski tidak didukung, pasangan HTML standar akan dirender, tetapi AMP tidak akan memvalidasi halaman Anda dan Anda tidak akan mendapatkan semua manfaat dari yang dapat disediakan AMP.

Gambar

Sertakan gambar pada halaman Anda dengan menggunakan elemen amp-img seperti berikut ini:

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

Pada sebagian besar contoh dasar ini, gambar akan ditampilkan dengan lebar dan tinggi tetap yang telah ditentukan. Setidaknya, lebar dan tinggi minimum yang tegas perlu ditetapkan.

Menampilkan gambar saat JavaScript dinonaktifkan

Karena <amp-img> bergantung pada JavaScript, jika pengguna memilih menonaktifkan skrip, gambar tidak akan ditampilkan. Dalam hal ini, Anda harus menyediakan fallback pada gambar dengan menggunakan <img> dan <noscript>, seperti berikut ini:

<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>
Buka cuplikan ini di playground

Tata letak tingkat lanjut

Dibandingkan dengan CSS/HTML standar, AMP sangat memudahkan pembuatan gambar yang sepenuhnya responsif. Pada sebagian besar bentuk dasarnya, Anda hanya perlu menambahkan 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>
Buka cuplikan ini di playground

BACA – Pelajari lebih lanjut tentang teknik tata letak tingkat lanjut.

Perilaku dan bakal tempat (placeholder)

Runtime HTML AMP dapat mengelola konten gambar secara efektif, yang memilih untuk menunda atau memprioritaskan pemuatan sumber daya berdasarkan pada posisi viewport, sumber daya sistem, bandwidth koneksi, atau berbagai faktor lainnya.

Gambar animasi

Elemen amp-anim sangat mirip dengan elemen amp-img, kedua elemen ini memberikan fungsi tambahan untuk mengelola pemuatan dan pemutaran gambar animasi seperti 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>
Buka cuplikan ini di playground

CATATAN – Sertakan <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script> di tajuk halaman Anda untuk menggunakan komponen ini.

Video

Sertakan video di halaman Anda dengan menggunakan elemen amp-video .

Gunakan elemen ini hanya untuk sematan berkas video HTML5 langsung. Elemen akan memuat sumber daya video yang ditetapkan dengan atribut src secara perlahan, pada waktu yang telah ditentukan oleh AMP.

Sertakan bakal tempat sebelum video dimulai, dan fallback, jika browser tidak mendukung video HTML5, contoh:

This browser does not support the video element.

<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>
Buka cuplikan ini di playground

Audio

Sertakan sumber daya (konten) audio pada halaman Anda dengan menggunakan elemen amp-audio.

Gunakan elemen ini hanya untuk sematan berkas audio HTML5 langsung. Seperti halnya semua sumber daya eksternal yang disematkan pada halaman AMP, elemen ini akan memuat sumber daya audio yang telah ditetapkan dengan atribut src secara perlahan, pada waktu yang telah ditentukan oleh AMP.

Sertakan fallback, jika browser tidak mendukung audio HTML5, misalnya:

Your browser doesn’t support HTML5 audio.

<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>
Buka cuplikan ini di playground

CATATAN – Sertakan <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script> di tajuk halaman Anda untuk menggunakan komponen ini.