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:

• Kita perlu memahami tata letak halaman sebelum aset dimuat, karena ini penting untuk mendukung prapemuatan viewport pertama
• Kita perlu mengontrol permintaan jaringan agar konten diprioritaskan dan dimuat secara perlahan dan efektif

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>

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>

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>

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>

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:

<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>

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:

<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>

• Written by @pbakaus
  with contributions from @Meggin and @bpaduch