AMP
ID
English Deutsch Français العربية Español Italiano 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

amp-video

 
You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

Replaces the HTML5 video tag.

 

Required Scripts

<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

Supported Layouts

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

Anda telah membaca dokumen ini belasan kali, tetapi belum semua pertanyaan Anda terjawab? Mungkin orang lain merasakan hal yang sama. Berinteraksilah dengan mereka di Stack Overflow.

Kunjungi Stack Overflow
Menemukan bug atau ada fitur yang kurang?

Proyek AMP sangat menganjurkan partisipasi dan kontribusi Anda! Kami berharap Anda akan terus ambil bagian dalam komunitas sumber terbuka kami, tetapi kami juga menerima kontribusi satu kali untuk topik tertentu yang Anda minati.

Kunjungi GitHub