AMP

amp-video

Penggantian untuk tag video HTML5; digunakan hanya untuk sematan file video HTML5 langsung.

Skrip yang Diperlukan <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
Contoh AMP By Example:
Tata Letak yang Didukung fill, fixed, fixed-height, flex-item, nodisplay, responsive

Perilaku

Komponen amp-video memuat resource video yang ditentukan oleh atribut src secara longgar, pada suatu waktu yang ditentukan oleh runtime. Anda dapat mengontrol komponen amp-video dengan cara yang hampir sama dengan tag <video> HTML5.

Komponen amp-video menerima hingga empat jenis node HTML unik sebagai turunan:

  • tag source: Sama seperti pada tag <video> HTML, Anda dapat menambahkan turunan tag <source> untuk menentukan file media sumber berbeda yang ingin diputar.
  • tag track untuk mengaktifkan subtitel dalam video. Jika track dihosting pada asal yang berbeda dengan dokumen, Anda harus menambahkan atribut crossorigin ke <amp-video>.
  • sebuah placeholder untuk sebelum video dimulai
  • sebuah fallback jika browser tidak mendukung video HTML5: Satu atau nol node turunan langsung dapat memiliki atribut fallback. Jika ada, node ini dan turunannya akan membentuk konten yang ditampilkan jika video HTML5 tidak didukung pada browser pengguna.

Contoh

This browser does not support the video element.

<amp-video controls
  width="640"
  height="360"
  layout="responsive"
  poster="/static/inline-examples/images/kitten-playing.png">
  <source src="/static/inline-examples/videos/kitten-playing.webm"
    type="video/webm" />
  <source src="/static/inline-examples/videos/kitten-playing.mp4"
    type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>
Open this snippet in playground

Analisis

amp-video mendukung analisis yang siap digunakan. Lihat analisis video untuk informasi selengkapnya.

Atribut

src Wajib ada jika turunan <source> tidak ada. Harus berupa HTTPS.
poster Gambar untuk frame yang akan ditampilkan sebelum pemutaran video dimulai. Secara default, frame pertama ditampilkan.
Sebagai alternatif, Anda dapat menyajikan overlay klik-untuk-putar. Untuk selengkapnya, lihat bagian Overlay klik-untuk-putar di bawah.
autoplay Jika atribut ini ada, dan browser mendukung fitur autoplay, video akan otomatis diputar begitu terlihat. Ada beberapa kondisi yang harus dipenuhi oleh komponen ini agar video dapat diputar, seperti dijelaskan dalam spesifikasi Video di AMP.
controls Atribut ini mirip dengan atribut controls dalam video HTML5. Jika atribut ini ada, browser menyediakan kontrol yang dapat digunakan pengguna untuk mengontrol pemutaran video.
controlsList Sama seperti atribut controlsList elemen video HTML5. Hanya didukung oleh browser tertentu. Lihat https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList untuk selengkapnya.
dock Memerlukan ekstensi amp-video-docking. Jika atribut ini ada dan video diputar secara manual, video akan "diminimalkan" dan dikunci ke suatu sudut atau elemen saat pengguna men-scroll keluar dari area visual komponen video. Untuk penjelasan selengkapnya, lihat dokumentasi ekstensi dok.
loop Jika ada, video akan otomatis diulang kembali ke awal setelah mencapai akhir.
crossorigin Diperlukan jika resource track dihosting pada asal yang berbeda dengan dokumen.
disableremoteplayback Menentukan apakah elemen media diizinkan memiliki UI pemutaran jarak jauh seperti Chromecast atau AirPlay atau tidak.
muted (tidak digunakan lagi) Atribut muted sudah tidak digunakan dan tidak lagi memiliki efek apa pun. Atribut autoplay otomatis mengontrol perilaku mute (matikan suara).
noaudio Menganotasi video sebagai tidak memiliki audio. Atribut ini menyembunyikan ikon equalizer yang ditampilkan pada video yang memiliki fitur autoplay.
rotate-to-fullscreen Jika video terlihat, video akan ditampilkan secara layar penuh setelah pengguna memutar perangkat ke mode lanskap. Untuk penjelasan selengkapnya, baca spesifikasi Video di AMP.
atribut umum Elemen ini mencakup atribut umum yang diperluas ke komponen AMP.

Atribut Media Session API

Komponen amp-video menerapkan Media Session API, yang memungkinkan developer untuk menentukan informasi lebih lanjut tentang file video. Informasi tambahan untuk video ditampilkan di pusat notifikasi perangkat pengguna (bersama kontrol putar/jeda).

artwork Menentukan URL ke gambar PNG/JPG/ICO yang berfungsi sebagai poster video. Jika artwork tidak ada, helper Media Session API akan menggunakan kolom image dalam definisi schema.org, og: image, atau favicon situs.
artist Menunjukkan pembuat file video, yang ditetapkan sebagai string.
album Menunjukkan album/koleksi dari mana video diambil, yang ditentukan sebagai string.
title Menunjukkan nama/judul video, yang ditetapkan sebagai string. Jika tidak disediakan, helper Media Session API akan menggunakan atribut aria-label atau melakukan fallback ke judul halaman.

Contoh:

Contoh di bawah berisi atribut poster dan artwork. Atribut poster berfungsi sebagai gambar placeholder sebelum video diputar, sedangkan artwork adalah gambar yang ditampilkan di notifikasi melalui MediaSession API.

<amp-video width="720" height="305" layout="responsive"
    src="https://yourhost.com/videos/myvideo.mp4"
    poster="https://yourhost.com/posters/poster.png"
    artwork="https://yourhost.com/artworks/artwork.png"
    title="Awesome video" artist="Awesome artist"
    album="Amazing album">
</amp-video>

Overlay klik-untuk-putar

Overlay klik-untuk-putar adalah fitur UX umum untuk pemutar video di web. Misalnya, Anda dapat menampilkan ikon putar kustom yang dapat diklik pengguna, serta menyertakan judul video, gambar poster berukuran berbeda, dan sebagainya. Karena komponen amp-video mendukung tindakan AMP play standar, Anda dapat menerapkan klik-untuk-putar dengan mudah.

Untuk contoh lebih lengkap, kunjungi Overlay klik-untuk-putar untuk amp-video di AMP By Example.

Validasi

Lihat aturan amp-video dalam spesifikasi validator AMP.

Perlu bantuan lainnya?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub