Semua yang Harus Diketahui Pengiklan Digital Tentang Video & Atribut AMP

Saat ini, jutaan domain telah menerbitkan miliaran halaman yang dimuat secara instan menggunakan kerangka Accelerated Mobile Pages. Dimulai beberapa tahun yang lalu, proyek ini telah berhasil membantu meningkatkan tidak hanya waktu pemuatan halaman web, tetapi juga pengalaman pengguna dan, sebagai hasilnya, ROI bisnis.

Ini dicapai dengan menurunkan “berat” halaman — data ukurannya — dengan pembatasan JavaScript, penggantian ringan bahasa pengkodean populer, dan cache di jaringan pengiriman konten Google.

Kritik terbesar proyek, bagaimanapun, adalah bahwa ia menukar keterlibatan untuk kecepatan. Meskipun itu dulu benar — AMP terutama digunakan di situs berita untuk konten statis — sekarang tidak lagi. Sekarang AMP dapat digunakan untuk membangun seluruh situs web, lengkap dengan versi kecepatan tinggi dari elemen halaman berat seperti video. Hari ini kami menguraikan dengan tepat cara kerja komponen video AMP ini, hingga definisi istilah pengkodean tertentu, kemampuan analitik, tata letak, dan lainnya.

Atribut

Setiap komponen video AMP dilengkapi dengan serangkaian atribut. Beberapa tumpang tindih, beberapa unik untuk komponen, dan masing-masing mengontrol aspek cara video berperilaku atau ditampilkan.

Berikut ini adalah daftar atribut yang akan Anda temukan di antara komponen, dan artinya. Daftar ini tidak lengkap. Sebaiknya periksa kembali halaman pengembang AMP khusus komponen sebelum Anda menambahkannya ke halaman Anda.

• src: Elemen ini diperlukan jika tidak ada <source> yang ditentukan. Itu harus ditentukan dalam HTTPS.
• poster: Ini menentukan thumbnail gambar yang ditampilkan sebelum pemirsa mengklik "putar". Bingkai pertama ditampilkan secara default. Anda juga dapat memilih untuk menampilkan overlay, yaitu click-to-play.
• putar otomatis: Jika browser mendukung putar otomatis, Anda dapat menggunakan atribut ini untuk membuat putar otomatis video segera setelah dilihat oleh pengunjung.
• kontrol: Dengan atribut ini, browser akan menawarkan kontrol yang dapat digunakan pengguna untuk mengontrol pemutar video.
• controlsList: Hanya didukung oleh beberapa browser, controlsList memungkinkan pengguna untuk menampilkan kontrol yang dapat digunakan untuk menyesuaikan pemutaran.
• dock: Saat digabungkan dengan ekstensi docking amp-video, atribut ini meminimalkan dan memperbaiki pemutar video ke sudut saat pengguna menggulir keluar dari areanya.
• loop: Jika diterapkan, video akan secara otomatis mengulang kembali ke awal saat mencapai akhir.
• crossorigin: Elemen ini diperlukan jika video di-host di tempat lain selain dokumen asal.
• disableremoteplayback: Dengan elemen ini, nonaktifkan pemutaran jarak jauh melalui sistem seperti Chromecast atau AirPlay.
• noaudio: Atribut ini menonaktifkan audio pada video.
• rotate-to-fullscreen: Jika atribut ini diaktifkan, saat pengguna memutar perangkatnya, video akan menyesuaikan ke layar penuh.

Atribut Umum

Atribut umum adalah atribut yang berlaku untuk banyak komponen AMP. Dalam daftar komponen video AMP kami, saat Anda melihat referensi ke "atribut umum", itu berarti bahwa berikut ini dapat digunakan dengannya.

mundur

Dengan fallback, browser akan berkomunikasi dengan penampil saat tidak mendukung elemen, atau saat pemuatan gagal. Pada contoh di bawah, pesan kesalahan berbunyi "Tidak dapat memutar gambar animasi di perangkat ini." Fallback dapat digunakan pada elemen AMP apa pun yang mendukung fallback, dan akan ditampilkan sebagai pengganti elemen yang tidak didukung.

Ketinggian

Jika suatu elemen mendukung tata letak responsif, elemen tersebut juga mendukung atribut ketinggian. Atribut height ditentukan berdasarkan ekspresi media dan hanya berlaku untuk height. Nilai persen diperbolehkan. Jika tingginya 80%, seperti pada contoh di bawah, tinggi elemen akan menjadi 80% dari lebarnya.

Tata Letak

Atribut layout menentukan bagaimana suatu elemen berperilaku. Anda dapat menentukan tata letak untuk komponen dengan menambahkan atribut tata letak dengan salah satu nilai tata letak yang didukung untuk elemen (lebih lanjut tentang itu nanti).

Media

Sebagian besar elemen AMP mendukung atribut media. Nilai media adalah media query. Jika kueri tidak cocok, elemen tidak akan dirender, dan sumber dayanya serta kemungkinan sumber daya turunannya tidak akan diambil. Jika jendela browser mengubah ukuran atau orientasi, kueri media dievaluasi ulang, dan elemen disembunyikan dan ditampilkan berdasarkan hasil baru.

Tidak memuat

Saat dimuat, banyak elemen AMP menampilkan animasi pemuatan dasar, yang menunjukkan bahwa elemen sedang diproses untuk ditampilkan. Atribut noloading mengontrol apakah animasi tersebut ditampilkan.

Tempat penampung

Elemen yang ditandai dengan atribut placeholder akan menampilkan placeholder untuk elemen induknya. Dalam contoh di bawah ini, gambar pratinjau ditampilkan sebagai pengganti untuk gif animasi. Atribut ini dapat digunakan pada elemen HTML apa pun yang merupakan turunan dari elemen AMP yang mendukung placeholder.

Placeholder akan segera ditampilkan di tempat induknya, secara default. Saat sumber daya disajikan, tempat penampung disembunyikan dan sumber daya ditampilkan di tempatnya.

ukuran

Jika elemen AMP mendukung tata letak responsif, itu juga mendukung atribut ukuran. Atribut ini ditentukan oleh kueri media berdasarkan ukuran jendela pengguna saat ini.

Lebar dan tinggi

Dalam tata letak tertentu, atribut lebar dan tinggi yang berisi nilai piksel harus ditentukan untuk beberapa komponen AMP.

Tata Letak

Menurut sumber daya pengembang AMP, elemen <amp-img> dan <amp-video> AMP dapat memiliki salah satu dari enam tata letak, yang masing-masing membuat elemen berperilaku berbeda:

Responsif

Ketika sebuah elemen dibuat responsif, itu akan mengubah ukuran secara otomatis agar sesuai dengan ruang area tertentu. Ruang yang tersedia tergantung pada elemen induk.

Namun, Anda tidak bisa begitu saja menentukan elemen sebagai responsif. Untuk memastikannya ditampilkan, Anda harus menentukan lebar dan tinggi untuk elemen yang memuatnya.

Tidak ada tampilan

Dengan tata letak ini, elemen Anda tidak akan ditampilkan. Ini tidak akan memakan ruang sama sekali di layar. Ini dapat diterapkan ke elemen AMP mana pun dan mengasumsikan bahwa tindakan pengguna dapat membuat elemen terlihat, seperti mengarahkan kursor untuk mengaktifkan pop-up, misalnya.

Hakiki

Dalam tata letak ini, elemen menggunakan ruang yang tersedia, mengubah ukuran tingginya berdasarkan atribut lebar dan tinggi hingga mencapai ukuran alami atau batasan CSS seperti lebar maksimum.
Ruang yang tersedia tergantung pada elemen induk.

Flex-item

Dengan tata letak ini, elemen di induknya akan menggunakan ruang yang tersisa dari induk tersebut saat itu adalah wadah fleksibel, seperti "display: flex."

Tinggi tetap

Elemen yang ditentukan sebagai ketinggian tetap akan menyesuaikan agar sesuai dengan ruang yang tersedia, tetapi tingginya akan tetap konstan. Dalam hal ini, atribut tinggi harus ada, dan atribut lebar tidak boleh (atau jika ya, sama dengan nol).

Tetap

Elemen tetap memiliki tinggi dan lebar tetap, dan tidak ada respons yang didukung. Untuk mengaktifkan tata letak ini, lebar dan tinggi harus ditentukan.

Mengisi

Dengan tata letak ini, sebuah elemen akan mengisi semua tinggi dan lebar yang tersedia. Ini akan cocok dengan tinggi dan lebar elemen induknya selama wadah induk menentukan "position:relative" atau "position:absolute."

Wadah

Seperti div HTML, tata letak ini memungkinkan turunan elemen menentukan ukurannya. Dengan wadah, komponen hanya bertindak sebagai wadah, dan tidak memiliki tata letak khusus itu sendiri. Anak-anaknya ditampilkan secara instan.

Dukungan analitik

Meskipun setiap komponen video AMP mungkin tidak memiliki kemampuan analitik yang dimiliki pemutar video lain, itu tidak berarti Anda tidak dapat melacak metrik performa video yang sangat spesifik. Inilah yang dapat Anda lacak:

• putar otomatis: Menunjukkan apakah video dimulai sebagai video putar otomatis.
• currentTime: Menentukan waktu pemutaran saat ini (dalam detik) pada saat pemicu.
• durasi: Menentukan total durasi video (dalam detik).
• tinggi: Menentukan tinggi video (dalam px).
• id: Menentukan ID elemen video.
• playTotal: Menentukan jumlah total waktu pengguna telah menonton video.
• state: Menunjukkan status, yang dapat berupa "playing_auto", "playing_manual", atau "paused".
• lebar: Menentukan lebar video (dalam px).
• playingRangesJson: Mewakili segmen waktu pengguna telah menonton video (dalam format JSON).

Untuk beberapa komponen video AMP, Anda dapat mendeteksi semua metrik ini. Untuk orang lain, Anda hanya akan memiliki dukungan analitik parsial. Dukungan sebagian berarti bahwa semua kecuali currentTime, aduration, playingRangesJson, dan playingTotal didukung. Di bagian komponen video AMP, Anda akan menemukan tingkat dukungan analitik. Temukan selengkapnya tentang analisis video AMP di sini.

Komponen video AMP

amp-video

Komponen amp-video adalah pengganti tag video HTML5; hanya untuk digunakan untuk penyematan file video HTML5 langsung. Komponen amp-video memuat sumber daya video yang ditentukan oleh atribut src-nya dengan lambat, pada waktu yang ditentukan oleh runtime. Anda dapat mengontrol komponen amp-video dengan cara yang sama seperti tag <video> HTML5 standar.

Contoh

Dukungan analitik: penuh

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

Tata letak yang tersedia: isi, tetap, tinggi tetap, item fleksibel, nodisplay, responsif

Atribut: src, poster, putar otomatis, kontrol, daftar kontrol, dok, loop, crossorigin, nonaktifkan pemutaran jarak jauh, noaudio, putar ke layar penuh, atribut umum

amp-3q-player

Komponen amp-3q-player memungkinkan pengembang untuk menyematkan video dari 3Q SDN.

contoh

Dukungan analitik: parsial

Diperlukan skrip: <script async custom-element=”amp-3q-player” src=”https://cdn.ampproject.org/v0/amp-3q-player-0.1.js”></script>

Tata letak yang tersedia: isi, tetap, item fleksibel, responsif

Atribut: putar otomatis (opsional), atribut umum

amp-brightcove

Komponen amp-brightcove menyematkan pemutar video seperti yang terlihat di Video Cloud Brightcove atau Brightcove Player.

Contoh

Dukungan analitik: penuh

Diperlukan skrip: <script async custom-element=”amp-brightcove” src=”https://cdn.ampproject.org/v0/amp-brightcove-0.1.js”></script>

Tata letak yang tersedia: isi, tetap, tinggi tetap, item fleksibel, nodisplay, responsif

Atribut: data-account, data-player atau data-player-id, data-embed, data-video-id, data-playlist-id, data-referrer, data-param-

amp-dailymotion

Saat komponen amp-dailymotion menampilkan video dari pemutar Dailymotion.

Contoh

Dukungan analitik: parsial

Diperlukan skrip: <script async custom-element=”amp-dailymotion” src=”https://cdn.ampproject.org/v0/amp-dailymotion-0.1.js”></script>

Tata letak yang tersedia: isi, tetap, tinggi tetap, item fleksibel, responsif

Atribut: autoplay, data-videoid (wajib), data-mute (opsional), data-endscreen-enable (opsional), data-sharing-enable (opsional), data-start (opsional), data-ui-highlight (opsional) ), data-ui-logo (opsional), data-info (opsional), data-param-* (opsional), dock, atribut umum

amp-facebook

Komponen amp-facebook memiliki sedikit lebih banyak fleksibilitas daripada banyak tag dalam daftar ini. Selain video, tag amp-facebook juga bisa menampilkan komentar atau postingan Facebook.

Contoh

Dukungan analitik: parsial

Diperlukan skrip: <script async custom-element=”amp-facebook” src=”https://cdn.ampproject.org/v0/amp-facebook-0.1.js”></script>

Tata letak yang tersedia: isi, tetap, tinggi tetap, item fleksibel, nodisplay, responsif

Atribut: data-href (wajib), data-embed-as, data-align-center, data-locale (opsional), atribut umum

amp-gfycat

Komponen amp-gfycat menampilkan GIF dari gfycat.com.

Contoh

Dukungan analitik: parsial

Diperlukan skrip: <script async custom-element=”amp-gfycat” src=”https://cdn.ampproject.org/v0/amp-gfycat-0.1.js”></script>

Tata letak yang tersedia: isi, tetap, tinggi tetap, item fleksibel, responsif

Atribut: data-gfyid, lebar dan tinggi, noautoplay, atribut umum

amp-hulu

Komponen amp-hulu menyematkan video dari Hulu.

Contoh

Dukungan analitik: parsial

Diperlukan skrip: <script async custom-element=”amp-hulu” src=”https://cdn.ampproject.org/v0/amp-hulu-0.1.js”></script>

Tata letak yang tersedia: isi, tetap, tinggi tetap, item fleksibel, responsif

Atribut: data-idul fitri, atribut umum

amp-ima-video

amp-ima-video menyematkan pemutar video untuk iklan video sela. Komponen tersebut memerlukan tag iklan, yang disediakan dalam tag data, yang merupakan URL ke respons iklan yang sesuai dengan VAST (misalnya, lihat Tag Contoh IMA).

Contoh

Dukungan analitik: parsial

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

Tata letak yang tersedia: tetap, responsif

Atribut: data-tag (wajib), data-src, data-crossorigin, data-poster (opsional), data-delay-ad-request (opsional), data-ad-label (opsional), dock, atribut umum

amp-izlesene

Komponen amp-izlesene memungkinkan pengguna untuk menyematkan video Izlesene.

Contoh

Dukungan Analytics: : parsial

Diperlukan Skrip: <script async custom-element=”amp-izlesene” src=”https://cdn.ampproject.org/v0/amp-izlesene-0.1.js”></script>

Tata letak yang tersedia: isi, tetap, tinggi tetap, item fleksibel, responsif

Atribut: data-videoid (wajib), data-param-showrel

amp-kaltura-player

Komponen amp-kaltura-player memungkinkan pengguna untuk menyematkan video menggunakan pemutar Platform Video Kaltura.

Contoh

Dukungan Analytics: : parsial

Diperlukan Skrip: <script async custom-element=”amp-kaltura-player” src=”https://cdn.ampproject.org/v0/amp-kaltura-player-0.1.js”></script>

Tata Letak yang Tersedia: isi, tetap, tinggi tetap, item fleksibel, nodisplay, responsif

Atribut: data-partner, data-uiconf, data-entryid, data-param-*, atribut umum.

amp-ooyala-player

Amp-ooyala-player memungkinkan pengguna untuk menyematkan video Ooyala.

Contoh

Dukungan Analytics: sebagian

Diperlukan Skrip: <script async custom-element=”amp-ooyala-player” src=”https://cdn.ampproject.org/v0/amp-ooyala-player-0.1.js”></script>

Tata Letak yang Tersedia: isi, tetap, item fleksibel, responsif

Atribut: data-embedcode (wajib), data-playerid (wajib), data-pcode (wajib), data-playerversion (opsional), data-config (opsional), atribut umum

amp-reach-player

Komponen amp-reach-player memungkinkan pengguna untuk menyematkan Reach Player yang ada di platform Beachfront Reach.

Contoh

Dukungan Analytics: sebagian

Diperlukan Skrip: <script async custom-element=”amp-reach-player” src=”https://cdn.ampproject.org/v0/amp-reach-player-0.1.js”></script>

Tata Letak yang Tersedia: isi, tetap, tinggi tetap, item fleksibel, responsif

Atribut: data-embed-id, atribut umum

amp-springboard-player

amp-springboard-player menampilkan pemutar yang digunakan di Springboard.

Contoh

Dukungan Analytics: sebagian

Diperlukan Skrip: <script async custom-element=”amp-springboard-player” src=”https://cdn.ampproject.org/v0/amp-springboard-player-0.1.js”></script>

Tata Letak yang Tersedia: isi, tetap, item fleksibel, responsif

Atribut: date-site-id (wajib), data-mode (wajib), data-content-id (wajib), data-player-id (wajib), data-domain (wajib), data-item (wajib), atribut umum

amp-video-docking

Dengan ekstensi amp-video-docking, video dapat diminimalkan ke sudut halaman atau elemen yang diposisikan khusus, tetapi hanya jika video diputar secara manual. Saat pengguna menggulir keluar dari area komponen video, video akan diperkecil dan dipindahkan ke lokasi yang ditentukan. Jika pengguna menggulir ke belakang, itu akan kembali ke posisi semula. Selain itu…

• Video dapat ditambatkan ke sudut default atau ke posisi tetap khusus.
• Video dapat diseret dan diposisikan ulang oleh pengguna di sudut yang berbeda.
• Video dapat dijentikkan untuk diberhentikan dari posisi doknya.
• Beberapa video di halaman yang sama dapat dipasang ke dok, tetapi hanya satu per satu yang akan dipasang dan diperbaiki.

Secara default, video akan diperkecil ke pojok kanan atas. Pada 30% dari lebar viewport, lebar tidak kurang dari 180 piksel. Jika dokumennya RTL, video akan berlabuh di sudut kiri atas. Saat dalam mode ini, pengguna dapat menyeret video yang di-dok untuk dijepret ke salah satu sudut.

Ekstensi ini hanya dapat digunakan dengan pemutar video yang didukung. Saat ini, pemain yang didukung adalah:

• amp-brightcove
• amp-dailymotion
• amp-delight-player
• amp-ima-video
• amp-video
• amp-video-iframe
• amp-youtube

Sekali lagi, video hanya akan di-dock HANYA jika diputar secara manual. Ini berarti:

• Jika video memiliki putar otomatis, fitur tidak akan dipicu kecuali pengguna mengklik video terlebih dahulu.
• Jika video tidak memiliki putar otomatis, fitur tersebut tidak akan dipicu kecuali jika pengguna memutar video tersebut.
• Jika video dijeda saat menggulir, video tidak akan dipasang ke dok.

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

amp-video-iframe

Amp-video-iframe menampilkan iframe yang berisi pemutar video. Komponen ini tidak boleh digunakan untuk tujuan utama menampilkan iklan. Tidak apa-apa menggunakan amp-video-iframe untuk tujuan menampilkan video, di mana bagian dari video tersebut diiklankan. Tetapi kasus penggunaan periklanan harus menggunakan amp-ad sebagai gantinya.

Contoh

Agar integrasi video berfungsi, dokumen yang ada di dalam bingkai Anda harus menyertakan perpustakaan kecil:

Dukungan Analytics: sebagian

Diperlukan Skrip: <script async custom-element=”amp-vimeo” src=”https://cdn.ampproject.org/v0/amp-vimeo-0.1.js”></script>

Tata Letak yang Tersedia: isi, tetap, tinggi tetap, item fleksibel, intrinsik, nodisplay, responsif

Atribut: src (wajib), poster (wajib), putar otomatis, atribut umum, dok, sesi implementasi-media, implementasi-putar-ke-layar penuh

amp-vimeo

Komponen amp-vimeo memungkinkan pengguna untuk menyematkan video dari Vimeo.

Contoh

Dukungan Analytics: sebagian

Diperlukan Skrip: <script async custom-element=”amp-vimeo” src=”https://cdn.ampproject.org/v0/amp-vimeo-0.1.js”></script>

Tata Letak yang Tersedia: isi, tetap, tinggi tetap, item fleksibel, responsif

Atribut: autoplay, data-videoid (wajib)

amp-viqeo-player

amp-viqeo-player menampilkan pemutar video Viqeo.

Contoh

Dukungan Analytics: sebagian

Diperlukan Skrip: <script async custom-element=”amp-viqeo-player” src=”https://cdn.ampproject.org/v0/amp-viqeo-player-0.1.js”></script>

Tata Letak yang Tersedia: isi, tetap, tinggi tetap, item fleksibel, responsif

Atribut: autoplay, data-profileid, data-videoid, lebar dan tinggi

amp-wistia-player

Komponen amp-wistia-player memungkinkan pengguna untuk menyematkan.

Contoh

Dukungan Analytics: sebagian

Diperlukan Skrip: <script async custom-element=”amp-wistia-player” src=”https://cdn.ampproject.org/v0/amp-wistia-player-0.1.js”></script>

Tata Letak yang Tersedia: isi, tetap, tinggi tetap, item fleksibel, responsif

Atribut: data-media-hashed-id, atribut umum

amp-youtube

Komponen amp-youtube memungkinkan pembuat konten menyematkan video YouTube.

Contoh

Diperlukan Skrip: <script async custom-element=”amp-youtube” src=”https://cdn.ampproject.org/v0/amp-youtube-0.1.js”></script>

Atribut: autoplay, data-videoid, data-live-channelid, data-param-*, dock, kredensial (opsional), atribut umum.

Kesimpulan

Halaman web AMP tidak lagi dibatasi dalam hal menampilkan media. Dikombinasikan dengan atribut, tata letak, dan analitik, komponen video AMP memungkinkan pembuat konten untuk menampilkan visualisasi yang kaya tanpa mengurangi kecepatan. Apakah Anda siap untuk membuat halaman arahan pasca-klik seluler yang lebih cepat?

Mulai (dan selesaikan) hari ini dengan Instapage AMP.